Cara Membuat Animasi Loading Menggunakan HTML
Yosa AP
---
Tutorial Membuat Animasi Loading Dengan HTML - Halo Sobat, kembali lagi di TutorialKomputer.net. Pada kesempatan kali ini, saya akan memberikan tutorial tentang cara membuat animasi loading dengan menggunakan HTML. Animasi loading biasanya sering kita jumpai ketika kita akan membuka halaman sebuah website. Animasi loading akan berputar beberapa detik sebelum menampilkan halaman utama website. Ternyata menambahkan animasi loading di website mempunyai kelebihan tersendiri hlo,, salah satu kelebihannya adalah dengan adanya animasi loading, website kita yang awalnya ketika dibuka sedang menata halaman tidak terlihat oleh pengunjung. Pengunjung hanya akan tau kalau halaman website kita bagus tertata rapi.
 |
| Animasi loading di HTML |
Untuk pembuatan animasi loading, kita hanya menggunakan HTML dan CSS saja, tidak perlu Javascript.
Baca Juga : Cara Membuat Teks Bersinar Menggunakan HTML
Tampilan animasi loading yang akan kita buat adalah seperti dibawah ini.
 |
| Membuat Animasi Loading di HTML |
Untuk skrip HTML nya adalah sebagai berikut :
<html>
<center><h2>Animasi Loading</h2>
<div class="loader"></div>
</center>
</html>
Untuk skrip CSS nya adalah sebagai berikut :
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin: 0 auto
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
Untuk melihat atau menguji skrip diatas, silahkan masuk ke HTML Editor. Edit tulisan, tampilan dan warna dari animasi loading sesuai keinginan kalian.
Posting Komentar
Posting Komentar