Mamank Dzgn : Cara Menciptakan Efek Animasi Loading Di Blog

Cara Membuat Efek Animasi Loading Di Blog

Tutorial kali ini kita akan membahas imbas loading berbentuk PS4 ... Loading yang kita bahas kini yaitu loading yang cukup ringan tidak memberatkan blogger .. jadi fungsi si loading ini .. menunggu pemuatan isi dari blogger .. apabila pemuatan telah jawaban loading ini pun akan jawaban .. sesungguhnya sangat banyak tutorial wacana imbas loading .. namun disini aku akan membahas imbas loading yang unik yaitu efek loading di blog dengan berbentuk PS4 .. Langsung saja ke tutorialnya

Masuk Ke Blogger
Template > Edit Html
Masukan css di bawah ini sempurna diatas </head>

<style>  div#loading-abdoutechnologie {     right: 0;     bottom: 0;     position: fixed;     z-index: 99999999999999999999;     display: block;     left: 0;     top: 0;    background: #1d80d6;     background: -moz-linear-gradient(-45deg, #1d80d6 0%, #05306d 34%, #05306d 70%, #1d80d6 100%);     background: -webkit-linear-gradient(-45deg, #1d80d6 0%,#05306d 34%,#05306d 70%,#1d80d6 100%);     background: linear-gradient(135deg, #1d80d6 0%,#05306d 34%,#05306d 70%,#1d80d6 100%);     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d80d6', endColorstr='#1d80d6',GradientType=1 );     width: 100%;     height: 100%; }     #thanks {   padding: 10%; } #thanks-button {   cursor: pointer;   padding: 2%;   color: #fff;   position: absolute;   bottom: 0%;   z-index: 12;   background: #000;     -webkit-transition: all 1s ease;   -moz-transition: all 1s ease;   -ms-transition: all 1s ease;   -o-transition: all 1s ease;   transition: all 1s ease; } #close-cross {    cursor: pointer; } .container1 {       margin-top: 80px;   position: absolute;   width: 100vw;   height: 100vh; } .ps4-icons {     position: relative;     width:12vw;     margin:auto;     margin-top: 10vw;   -webkit-transition: all 1s ease;   -moz-transition: all 1s ease;   -ms-transition: all 1s ease;   -o-transition: all 1s ease;   transition: all 1s ease; }   @-moz-keyframes scaling {   0% {     transform: rotate(270deg) scale(0);   }   100% {     transform: rotate(360deg) scale(1);   } } @-webkit-keyframes scaling {   0% {     transform: rotate(270deg) scale(0);   }   100% {     transform: rotate(360deg) scale(1);   } }   @keyframes scaling {   0% {     transform: rotate(270deg) scale(0);   }   100% {     transform: rotate(360deg) scale(1);   } } @-o-keyframes scaling {   0% {     transform: rotate(270deg) scale(0);   }   100% {     transform: rotate(360deg) scale(1);   } }     .cross-icon {   background: url(https://d.top4top.net/p_579vpz791.png) no-repeat;   background-size: 100%;   width: 4vw;   height: 4vw;   margin: 1vw;   float:left; }   .square-icon {   background: url(https://b.top4top.net/p_5790u4dm3.png) no-repeat;   background-size: 100%;   width: 4vw;   height: 4vw;   margin: 1vw;   float:left; } .triangle-icon {   background: url(https://f.top4top.net/p_579x3s3u2.png) no-repeat;   background-size: 100%;   width: 4vw;   height: 4vw;   margin: 1vw;   float:left; } .circle-icon {   background: url(https://e.top4top.net/p_579ythha1.png) no-repeat;   background-size: 100%;   width: 4vw;   height: 4vw;   margin: 1vw;   float:left; }             #thanks {     -webkit-transition: all 1s ease;   -moz-transition: all 1s ease;   -ms-transition: all 1s ease;   -o-transition: all 1s ease;   transition: all 1s ease;   position: absolute;   bottom: -50%;   background: #000;   color: #fff;   padding: 1%; } #thanks a {   color: #fff;   text-decoration: underline;   font-weight: normal; }    </style>

Selanjutnya Simpan Kode Di bawah <body>

<script type='text/javascript'> function randomShape(array) {   return array[Math.floor(Math.random() * array.length)]; } function loadingScreen(){ var cross = 'https://d.top4top.net/p_579vpz791.png'; var circle = 'https://e.top4top.net/p_579ythha1.png'; var triangle = 'https://f.top4top.net/p_579x3s3u2.png'; var square = 'https://b.top4top.net/p_5790u4dm3.png'; var elements = document.querySelectorAll('.ps-icon');     Array.prototype.forEach.call(elements, function(el, i){     setTimeout(function(){       el.style.animation = "scaling";       el.style.animationDuration = "1s";       el.style.animationIterationCount = "1";       el.style.backgroundImage = "url("+randomShape([triangle,square,circle,cross])+")";       }, (i * 400));       el.style.animation = "";       el.style.animationDuration = "";       el.style.animationIterationCount = "";   }); function changeShape(){       var elements = document.querySelectorAll('.ps-icon');     Array.prototype.forEach.call(elements, function(el, i){     setTimeout(function(){       el.style.animation = "scaling";       el.style.animationDuration = "1s";       el.style.animationIterationCount = "1";       el.style.backgroundImage = "url("+randomShape([triangle,square,circle,cross])+")";       }, 100 + (i * 300));       el.style.animation = "";       el.style.animationDuration = "";       el.style.animationIterationCount = "";   });   } setInterval(changeShape,3000);   } loadingScreen();  </script> <script>           $(window).load(function(){      $("#loading-abdoutechnologie").fadeOut(1000)   });  </script> <div id='loading-abdoutechnologie'>   <div class="container1">   <div class="ps4-icons">     <div class="square-icon ps-icon"></div>     <div class="cross-icon ps-icon"></div>     <div class="circle-icon ps-icon"></div>     <div class="triangle-icon ps-icon"></div>   </div> </div>       </div>

Cukup Sekian Tutorial Kali Ini Semoga Bermanfaat

Demo