Pelajari cara membuat preloader dengan CSS.
Cara Membuat Loader sebuah
Langkah 1) Tambah HTML:
Contoh
<div class="loader"></div>Langkah 2) Tambah 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); }
} Cobalah sendiri " misalnya Dijelaskan
The border properti menentukan ukuran perbatasan dan warna perbatasan loader. The border-radius properti mengubah loader ke dalam lingkaran.
Hal biru yang berputar di dalam perbatasan ditentukan dengan border-top properti. Anda juga bisa memasukkan border-bottom , border-left dan / atau border-right jika Anda ingin lebih "spinners" (see example below) .
Ukuran loader ditentukan dengan width dan height sifat.
Akhirnya, kita menambahkan animation yang membuat hal berputar biru selamanya dengan kecepatan animasi kedua 2.
Catatan: Anda juga harus menyertakan awalan -webkit- dan -ms- untuk browser yang tidak mendukung animasi dan mengubah sifat. Klik pada contoh untuk melihat bagaimana.
Tambahkan lebih banyak pemintal
Contoh
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
} Cobalah sendiri " Contoh
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
} Cobalah sendiri " Contoh lain
Sebuah contoh bagaimana untuk menempatkan loader di tengah halaman dan acara "page content" saat loading selesai: