Membuat Animasi Loading Yin Yang CSS

Membuat Animasi Loading Yin Yang menggunakan CSS - Animasi ini berbentuk Yin Yang menggunakan CSS dan bisa anda gunakan juga untuk Loading Blog Anda. Untuk pembuatannya anda bisa melihat script berikut ini, yaitu tentang Membuat Animasi Loading Yin Yang dengan CSS.

Berikut ini script yang bisa Anda gunakan
HTML

<div class="yinyang">
</div>

CSS

.yinyang {
background: none repeat scroll 0 0 #EEEEEE;
border-color: #121212;
border-radius: 100%;
border-style: solid;
border-width: 2px 2px 50px;
height: 48px;
position: relative;
width: 96px;
/* css3 animation */
-webkit-animation: anim4 1s linear infinite;
-moz-animation: anim4 2s linear infinite;
-ms-animation: anim4 1s linear infinite;
-o-animation: anim4 1s linear infinite;
animation: anim4 1s linear infinite;
}
.yinyang:before {
background: none repeat scroll 0 0 #EEEEEE;
border: 18px solid #121212;
border-radius: 100%;
content: "";
height: 12px;
left: 0;
position: absolute;
top: 50%;
width: 12px;
}
.yinyang:after {
background: none repeat scroll 0 0 #000;
border: 18px solid #EEEEEE;
border-radius: 100%;
content: "";
height: 12px;
left: 50%;
position: absolute;
top: 50%;
width: 12px;
}
/* css3 keyframes - animation 4 */
@-webkit-keyframes anim4 {
from { -webkit-transform: rotateZ(0deg); }
50% { -webkit-transform: rotateZ(180deg); }
to { -webkit-transform: rotateZ(360deg); }
}
@-moz-keyframes anim4 {
from { -moz-transform: rotateZ(0deg); }
50% { -moz-transform: rotateZ(180deg); }
to { -moz-transform: rotateZ(360deg); }
}
@-ms-keyframes anim4 {
from { -ms-transform: rotateZ(0deg); }
50% { -ms-transform: rotateZ(180deg); }
to { -ms-transform: rotateZ(360deg); }
}
@-o-keyframes anim4 {
from { -o-transform: rotateZ(0deg); }
50% { -o-transform: rotateZ(180deg); }
to { -o-transform: rotateZ(360deg); }
}
@keyframes anim4 {
from { transform: rotateZ(0deg); }
50% { transform: rotateZ(180deg); }
to { transform: rotateZ(360deg); }
}

Demonya seperti dibawah ini

Oke selamat mencoba.

Membuat Animasi Loading Yin Yang CSS

Share this