Cara Membuat Efek Animasi Loading Di Blog

Cara Membuat Efek Animasi Loading Di Blog
Cara Membuat Efek Animasi Loading Di Blog

Tutorial kali ini kita akan membahas efek loading berbentuk PS4 ... Loading yang kita bahas sekarang adalah loading yang cukup ringan tidak memberatkan blogger .. jadi fungsi si loading ini ..  menunggu pemuatan isi dari blogger .. apabila pemuatan telah selesai loading ini pun akan selesai .. sebetulnya sangat banyak tutorial tentang efek loading .. namun disini saya akan membahas efek 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 tepat 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>
    

    Nah Selanjutnya Simpan .. Anda Akan Melihat Loading Blogger Yang Cukup Unik
Cukup Sekian Tutorial Kali Ini Semoga Bermanfaat

Belum ada Komentar untuk "Cara Membuat Efek Animasi Loading Di Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel