Tutorial Belajar Blog | Tips Blog | Membuat Loading Animasi CSS 3 - Tutorial eftutor Blog tentang CSS 3 Percobaan Membuat Loading Animasi kita akan belajar membuat loading animasi sederhana dengan memanfaatkan efek transisi pada CSS 3.
 |
| CSS 3 Percobaan Membuat Loading Animasi |
Langsung saja silahkan Anda coba Cara Membuat Loading Animasi :
HTML
<div class="loading-wrap">
<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
</div>
CSS
.loading-wrap {Oke, maaf belum sempet menampilkan demonya.
width: 60px; height: 60px;
position: absolute;
top: 50%; left: 50%;
margin: -30px 0 0 -30px;
background: #777;
animation: rotation ease-in-out 2s infinite; border-radius: 30px;
}
.triangle1, .triangle2, .triangle3 {
border-width: 0 20px 30px 20px;
border-style: solid;
border-color: transparent;
border-bottom-color: #67cbf0;
height: 0; width: 0;
position: absolute;
left: 10px; top: -10px;
animation: fadecolor 2s 1s infinite;}
.triangle2, .triangle3 {
content: '';
top: 20px; left: 30px;
animation-delay: 1.1s;}
.triangle3 {
left: -10px;
animation-delay: 1.2s;}
@keyframes rotation {
0% {transform: rotate(0deg);}
20% {transform: rotate(360deg);}
100% {transform: rotate(360deg);}
}
@keyframes fadecolor {
0% {border-bottom-color: #eee;}
100%{border-bottom-color: #67cbf0;}
}
Silahkan langsung divoba sendiri.