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>

Cukup Sekian Tutorial Kali Ini Semoga Bermanfaat

Demo

MAFSYAH

Cara Membuat Efek Animasi Loading Di Blog

Posting Komentar untuk "Cara Membuat Efek Animasi Loading Di Blog"

Menu Halaman Statis