Loading Animasi Dengan CSS3 Part 2 : Moving Ball vs Duocolour Animation

Ok, seperti janji saya sebelumnya untuk membuatkan postingan mengenai cara membuat loading animasi dengan CSS3 untuk menyambung "Loading Animasi Dengan CSS3 Part 1" maka kali ini tampilan loading animasi nya cukup berbeda meskipun dengan kombinasi warna utama yang sama seperti postingan sebelumnya.

Dan, pada postingan ini, saya akan share dua buah animasi loading yang berbeda, pertama adalah moving ball loader dan yang kedua adalah duocolour loader. Makanya judulnya pun terkesan gimana gitu pake vs-an segala...hehehe.....

Ok, langsung aja :

1. Moving ball loader.

DEMO :

.aiizahhmovingball{
position:relative;
width:128px;
height:10px;
}

.aiizahhmovingball-line span {
position:absolute;
left:0px;
top:4px;
height:2px;
width:128px;
background-color:#000000;
}

.aiizahhmovingball span {
background-color:#DB23D5;
position:absolute;
top:0;
left:0;
width:10px;
height:10px;
-moz-border-radius:5px;
-moz-animation-name:bounce_aiizahhmovingball;
-moz-animation-duration:2.9s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:5px;
-webkit-animation-name:bounce_aiizahhmovingball;
-webkit-animation-duration:2.9s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:5px;
-ms-animation-name:bounce_aiizahhmovingball;
-ms-animation-duration:2.9s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:5px;
-o-animation-name:bounce_aiizahhmovingball;
-o-animation-duration:2.9s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:5px;
animation-name:bounce_aiizahhmovingball;
animation-duration:2.9s;
animation-iteration-count:infinite;
animation-direction:linear;
}

@-moz-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@-webkit-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@-ms-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@-o-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

<div class="aiizahhmovingball">
<span></span>
<span></span>
</div>

2. Duocolour loader.

DEMO

.aiizahh-duocolourloader {text-align:center;}

.aiizahh-duocolourloader span {
display:inline-block;
background-color:#FF05FF;
top:0;
left:0;
width:10px;
height:10px;
-moz-border-radius:5px;
-moz-animation-name:bounce_aiizahh-duocolourloader;
-moz-animation-duration:1.5s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:5px;
-webkit-animation-name:bounce_aiizahh-duocolourloader;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:5px;
-ms-animation-name:bounce_aiizahh-duocolourloader;
-ms-animation-duration:1.5s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:5px;
-o-animation-name:bounce_aiizahh-duocolourloader;
-o-animation-duration:1.5s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:5px;
animation-name:bounce_aiizahh-duocolourloader;
animation-duration:1.5s;
animation-iteration-count:infinite;
animation-direction:linear;
}

.aiizahh-duocolourloader span:nth-child(1) {
-moz-animation-delay:0s;
-webkit-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}

.aiizahh-duocolourloader span:nth-child(2) {
-moz-animation-delay:0.15s;
-webkit-animation-delay:0.15s;
-ms-animation-delay:0.15s;
-o-animation-delay:0.15s;
animation-delay:0.15s;
}

.aiizahh-duocolourloader span:nth-child(3) {
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}

.aiizahh-duocolourloader span:nth-child(4) {
-moz-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-ms-animation-delay:0.45s;
-o-animation-delay:0.45s;
animation-delay:0.45s;
}


@-moz-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@-webkit-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@-ms-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@-o-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

<div class="aiizahh-duocolourloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

Bagaimana???

Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar....
Baca juga :
1. Membuat efek loading animasi beforeunload untuk blog.
2. Loading animasi dengan CSS3 Part 1.