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

Cara Membuat Efek Animasi Loading Di Blog Admin Mafsyah 5 of 5
Cara Membuat Efek Animasi Loading Di Blog Tutorial kali ini kita akan membahas efek loading berbentuk PS4 ... Loading yang kita bahas s...
Cara Membuat Efek Animasi Loading Di Blog
4/ 5 stars - "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 s...
Loading

URL POSTINGAN

URL:
HTML link code:
BB (forum) link code:

Silahkan Baca Aturan Komentar Yang Baik
Peraturan:
1. Dilarang "SPAM"Apabila Spam Maka Akan Di Block Supaya Tidak Bisa Komentar Lagi
2. Dilarang "Sebar Link Di Komentar " Apabila Share Link Di Komentar Otomatis Di Hapus
3. Dilarang "Bahasa Kasar"Bahasa Kasar Atau Kotor Akan Di Hapus OLeh Admin
4. Dilarang "Bully" Apabila Ada Komentar Berbau Bully Akan Di Hapus Oleh Admin
5. Silahkan Berkomentar Sesuai Kebutuhan

Komentar Facebook
0 Komentar Blogger

0 Comments