CSS Trik : Membuat Animasi Text Loading Dengan CSS

Diposting pada
CSS Trik : Membuat Animasi Text Loading Dengan CSS

Haloo sobat IDNCODER

Pada postingan kali ini saya akan membagikan CSS Trik bagaimana cara Membuat Animasi Text Loading. Mungkin tutorial seperti ini sudah banyak kalian temukan di web tutorial tutorial lain, namun tidak salah kan apabila saya juga berbagi.
Animasi Text Loading sangat sederhana, dan mungkin kalian juga dapat menambahkan Animasi Loading text ini ketika halaman website kalian ketika dimuat, nah sebelum kita mulai jangan lupa siapkan terlebih dahulu kode editor kalian, disini saya menggunakan Codepen sebagai kode editor agar dapat menampilkan Preview secara langsung juga, nah yuk langsung saja kita mulai.

Cara Membuat Animasi Text Loading Dengan CSS

1. Pertama, bukalah kode editor kalian (Jika kalian mau bisa menggunakan Codepen.io),
2. Lalu, Copy CSS dibawah ini, dan letakkan di file CSS kalian,

#spinningTextG{
width:240px;
height:undefinedpx}

.spinningTextG{
color:#000000;
font-family:Comic Sans MS;
font-size:25px;
text-decoration:none;
font-weight:normal;
font-style:normal;
float:left;
-moz-animation-name:bounce_spinningTextG;
-moz-animation-duration:1.9s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:normal;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_spinningTextG;
-webkit-animation-duration:1.9s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-webkit-transform:scale(.3);
-ms-animation-name:bounce_spinningTextG;
-ms-animation-duration:1.9s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:normal;
-ms-transform:scale(.3);
-o-animation-name:bounce_spinningTextG;
-o-animation-duration:1.9s;
-o-animation-iteration-count:infinite;
-o-animation-direction:normal;
-o-transform:scale(.3);
animation-name:bounce_spinningTextG;
animation-duration:1.9s;
animation-iteration-count:infinite;
animation-direction:normal;
transform:scale(.3);
}

#spinningTextG_1{
-moz-animation-delay:0.76s;
-webkit-animation-delay:0.76s;
-ms-animation-delay:0.76s;
-o-animation-delay:0.76s;
animation-delay:0.76s;
}

#spinningTextG_2{
-moz-animation-delay:0.95s;
-webkit-animation-delay:0.95s;
-ms-animation-delay:0.95s;
-o-animation-delay:0.95s;
animation-delay:0.95s;
}

#spinningTextG_3{
-moz-animation-delay:1.14s;
-webkit-animation-delay:1.14s;
-ms-animation-delay:1.14s;
-o-animation-delay:1.14s;
animation-delay:1.14s;
}

#spinningTextG_4{
-moz-animation-delay:1.33s;
-webkit-animation-delay:1.33s;
-ms-animation-delay:1.33s;
-o-animation-delay:1.33s;
animation-delay:1.33s;
}

#spinningTextG_5{
-moz-animation-delay:1.52s;
-webkit-animation-delay:1.52s;
-ms-animation-delay:1.52s;
-o-animation-delay:1.52s;
animation-delay:1.52s;
}

#spinningTextG_6{
-moz-animation-delay:1.71s;
-webkit-animation-delay:1.71s;
-ms-animation-delay:1.71s;
-o-animation-delay:1.71s;
animation-delay:1.71s;
}

#spinningTextG_7{
-moz-animation-delay:1.9s;
-webkit-animation-delay:1.9s;
-ms-animation-delay:1.9s;
-o-animation-delay:1.9s;
animation-delay:1.9s;
}

#spinningTextG_8{
-moz-animation-delay:2.09s;
-webkit-animation-delay:2.09s;
-ms-animation-delay:2.09s;
-o-animation-delay:2.09s;
animation-delay:2.09s;
}

#spinningTextG_9{
-moz-animation-delay:2.28s;
-webkit-animation-delay:2.28s;
-ms-animation-delay:2.28s;
-o-animation-delay:2.28s;
animation-delay:2.28s;
}

#spinningTextG_10{
-moz-animation-delay:2.47s;
-webkit-animation-delay:2.47s;
-ms-animation-delay:2.47s;
-o-animation-delay:2.47s;
animation-delay:2.47s;
}

#spinningTextG_11{
-moz-animation-delay:2.66s;
-webkit-animation-delay:2.66s;
-ms-animation-delay:2.66s;
-o-animation-delay:2.66s;
animation-delay:2.66s;
}

@-moz-keyframes bounce_spinningTextG{
0%{
-moz-transform:scale(1);
color:#000000;
}

100%{
-moz-transform:scale(.3) rotate(90deg);
color:#FFFFFF;
}

}

@-webkit-keyframes bounce_spinningTextG{
0%{
-webkit-transform:scale(1);
color:#000000;
}

100%{
-webkit-transform:scale(.3) rotate(90deg);
color:#FFFFFF;
}

}

@-ms-keyframes bounce_spinningTextG{
0%{
-ms-transform:scale(1);
color:#000000;
}

100%{
-ms-transform:scale(.3) rotate(90deg);
color:#FFFFFF;
}

}

@-o-keyframes bounce_spinningTextG{
0%{
-o-transform:scale(1);
color:#000000;
}

100%{
-o-transform:scale(.3) rotate(90deg);
color:#FFFFFF;
}

}

@keyframes bounce_spinningTextG{
0%{
transform:scale(1);
color:#000000;
}

100%{
transform:scale(.3) rotate(90deg);
color:#FFFFFF;
}

}
3. Kemudian, Copy kode HTML dibawah ini untuk menampilkan Animasi text loading,

<div id="spinningTextG">
<div id="spinningTextG_1" class="spinningTextG">
I</div>
<div id="spinningTextG_2" class="spinningTextG">
D</div>
<div id="spinningTextG_3" class="spinningTextG">
N</div>
<div id="spinningTextG_4" class="spinningTextG">
C</div>
<div id="spinningTextG_5" class="spinningTextG">
O</div>
<div id="spinningTextG_6" class="spinningTextG">
D</div>
<div id="spinningTextG_7" class="spinningTextG">
E</div>
<div id="spinningTextG_8" class="spinningTextG">
R</div>
<div id="spinningTextG_9" class="spinningTextG">
.</div>
<div id="spinningTextG_10" class="spinningTextG">
.</div>
<div id="spinningTextG_11" class="spinningTextG">
.</div>
</div>
4. Terakhir simpan, dan jalankan

See the Pen IDNCODER – Animasi Text Loading by Rahman (@rahmannur19) on CodePen.

Nahh bagaimana menurutmu ? Menarik bukan, mungkin itu saja yang dapat saya bagikan Mengenai Bagaimana cara membuat animasi text loading dengan CSS, dan semoga bermanfaat.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *