BAGAIMANA - CSS Loader
Pelajari cara membuat prapemuat dengan CSS.
Cara Membuat Pemuat
Langkah 1) Tambahkan HTML:
Contoh
<div class="loader"></div>
Langkah 2) Tambahkan CSS:
Contoh
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
Contoh Dijelaskan
Properti border
menentukan ukuran batas dan warna batas loader. Properti border-radius
mengubah loader menjadi lingkaran.
Hal biru yang berputar di dalam perbatasan ditentukan dengan
border-top
properti. Anda juga dapat menyertakan border-bottom
, border-left
dan/atau
border-right
jika Anda menginginkan lebih banyak "pemintal" (lihat contoh di bawah).
Ukuran loader ditentukan dengan properti width
and height
.
Akhirnya, kami menambahkan animation
yang membuat benda biru berputar selamanya dengan kecepatan animasi 2 detik.
Catatan: Anda juga harus menyertakan awalan -webkit- untuk browser yang tidak mendukung properti animasi dan transformasi. Klik pada contoh untuk melihat caranya.
Tambahkan lebih banyak pemintal
Contoh
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
Contoh
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Contoh
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Contoh lain
Contoh cara menempatkan loader di tengah halaman dan menampilkan "konten halaman" saat pemuatan selesai: