Membuat Animasi Loading Dengan CSS3

Membuat Animasi Loading Dengan CSS3: Tutorial kali ini adalah cara membuat animasi loading menggunakan CSS3. Perlu untuk diketahui bahwa tutorial ini murni menggunakan CSS3 tanpa melibatkan javascript, jQuery dan juga kita tidak perlu load gambar karena di sini kita hanya menggunakan trik animation yang terdapat di CSS3.



Tutorial Animasi loading ini ada 2 jenis, yang pertama adalah Animasi Loading Bar dan Animasi Loading Spin atau animasi loading memutar.



Berikut tutorial dalam animasi loading.

Demo Animasi Loading Bar

Start Animasi

CSS3 Animasi Loading Bar

.abLoadingBar {
 background-color:#007ACC;  
 background-image: -moz-linear-gradient(45deg, #007ACC 25%, #BFE4FD); 
 background-image: -webkit-linear-gradient(45deg, #007ACC 25%, #BFE4FD);
 border-left:1px solid #007ACC; border-top:1px solid #229cee; border-right:1px solid #007ACC; border-bottom:1px solid #229cee; 
 width:2px;
 height:10px;
 float:left;
 margin-left:5px;
        opacity:0.1;
 -webkit-transform: scale(0.7);
 -moz-transform: scale(0.7);
 -moz-animation:abLoading 1s infinite linear;
 -webkit-animation:abLoading 1s infinite linear;
}
#abBlock_1{
  -moz-animation-delay: .6s;
 -webkit-animation-delay: .6s;
 }
#abBlock_2{
  -moz-animation-delay: .5s;
 -webkit-animation-delay: .5s;
}
#abBlock_3{
  -moz-animation-delay: .4s;
 -webkit-animation-delay: .4s;
}
#abBlock_4{
  -moz-animation-delay: .3s;
 -webkit-animation-delay: .3s;
}
#abBlock_5{
  -moz-animation-delay: .4s;
 -webkit-animation-delay: .4s;
}
#abBlock_6{
  -moz-animation-delay: .5s;
 -webkit-animation-delay: .5s;
}
#abBlock_7{
  -moz-animation-delay: .6s;
 -webkit-animation-delay: .6s;
}
@-moz-keyframes abLoading{
 0%{-moz-transform: scale(1.3);opacity:1;}
 100%{-moz-transform: scale(0.7);opacity:0;}
}
@-webkit-keyframes abLoading{
 0%{-webkit-transform: scale(1.3);opacity:1;}
 100%{-webkit-transform: scale(0.7);opacity:0;}
}

HTML Animasi Loading Bar

<div id="abBlock_1" class="abLoadingBar"></div>
<div id="abBlock_2" class="abLoadingBar"></div>
<div id="abBlock_3" class="abLoadingBar"></div>
<div id="abBlock_4" class="abLoadingBar"></div>
<div id="abBlock_5" class="abLoadingBar"></div>
<div id="abBlock_6" class="abLoadingBar"></div>
<div id="abBlock_7" class="abLoadingBar"></div>

Demo Animasi Loading Spin

+

Start Animasi

CSS3 Animasi Loading Spin

.circle {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-right:5px solid rgba(0,0,0,0);
 border-left:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 35px #2187e7;
 width:50px;
 height:50px;
 margin:0 auto;
 -moz-animation:spinPulse 1s infinite ease-in-out;
 -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-left:5px solid rgba(0,0,0,0);
 border-right:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 15px #2187e7; 
 width:30px;
 height:30px;
 margin:0 auto;
 position:relative;
 top:-50px;
 -moz-animation:spinoffPulse 1s infinite linear;
 -webkit-animation:spinoffPulse 1s infinite linear;
 text-align: center;
 font-family: Segoe UI;
 font-size: 24px;
 font-weight: bolder;
 color: rgba(0, 183, 229, 0.9);
}
@-moz-keyframes spinPulse {
 0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
 50% { -moz-transform:rotate(145deg); opacity:1; }
 100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
 0% { -moz-transform:rotate(0deg); }
 100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
 0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
 50% { -webkit-transform:rotate(145deg); opacity:1;}
 100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
 0% { -webkit-transform:rotate(0deg); }
 100% { -webkit-transform:rotate(360deg); }
}

HTML Animasi Loading Spin

<div class="circle"></div>
<div class="circle1"></div>

Selamat belajar dan selamat mencoba trik Animation dari CSS3.