Bagaimana membuat: CSS loader
- Halaman sebelumnya Daftar tugas yang belum selesai
- Halaman berikutnya Medali
Belajar cara menggunakan CSS untuk membuat preloader.
Bagaimana membuat loader
Langkah pertama - Tambahkan HTML:
<div class="loader"></div>
Langkah kedua - Tambahkan CSS:
.loader {
border: 16px solid #f3f3f3; /* Abu-abu */
border-top: 16px solid #3498db; /* Biru */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Contoh penjelasan:
border properti untuk menentukan ukuran dan warna border loader.border-radius properti untuk menjadikan loader menjadi lingkaran.
bagian biru yang berputar di dalam border ditentukan oleh border-top properti untuk menentukan. Jika Anda ingin lebih banyak "peron rotasi", Anda dapat termasuk border-bottom,border-left dan/atau border-right（lihat contoh di bawah ini).
Ukuran loader ditentukan oleh width dan height dengan properti.
Akhirnya, kami menambahkan animasi untuk membuat bagian biru berputar selamanya dengan kecepatan animasi 2 detik.
Perhatian:untuk yang tidak mendukung animation dan transform browser untuk properti, Anda seharusnya termasuk satu -webkit- awalan. Klik contoh untuk melihat bagaimana cara operasinya.
menambahkan lebih banyak peron rotasi
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
Bagaimana menempatkan loader di tengah halaman dan menampilkan 'Konten halaman' saat pengerjaan selesai:
Contoh
- Halaman sebelumnya Daftar tugas yang belum selesai
- Halaman berikutnya Medali
