Generator Animasi CSS Spinner

Cara animasi dibangun

CSS yang dihasilkan memiliki dua bagian yang bekerja berpasangan. Properti animation pada .loader memberi nama pada animasi, menetapkan durasinya, memilih fungsi waktunya, dan mengulanginya:

animation: spin 0.8s linear infinite;

Aturan @keyframes spin mendeskripsikan gerakannya sendiri. Aturan ini hanya memiliki keadaan akhir, yaitu rotasi 360 derajat. Browser mulai dari posisi normal elemen dan berinterpolasi menuju keadaan akhir tersebut:

@keyframes spin {
  to { transform: rotate(360deg); }
}

Kolom Kecepatan (s) di alat ini menjadi durasinya. Semua yang lain, termasuk linear dan infinite, tetap sama.

Memilih durasi

Ring yang lebih besar bisa berputar sedikit lebih lambat daripada yang kecil, karena tepi lingkaran besar sudah menempuh jarak lebih jauh setiap detiknya.

Mengapa menggunakan waktu linear

Alat ini memakai linear agar ring mempertahankan kecepatan sudut yang sama di seluruh putaran. Kurva pelonggaran seperti ease-in-out membuat ring melambat dan mempercepat di setiap putaran, yang terlihat seperti patah-patah untuk loop tanpa akhir. Jika Anda tetap menginginkan efek itu, ubah kata linear di CSS yang Anda tempel.

Batasan yang perlu diingat

• Kecepatan 0 menghasilkan animasi dengan durasi nol, sehingga ring tidak tampak berputar. Gunakan nilai di atas 0.
• Spinner selalu berputar searah jarum jam. Untuk membalik arahnya, ubah rotasi akhir menjadi -360deg setelah Anda menyalin kodenya.
• Geraknya adalah satu rotasi kontinu. Gerakan berdenyut, memantul, atau bertahap memerlukan keyframes tambahan yang ditulis manual.

Menjeda dan mengontrol animasi

Setelah CSS berada di halaman Anda, Anda dapat mengontrol animasinya dengan properti standar. Menetapkan animation-play-state: paused; membekukan ring di tempatnya, yang berguna untuk keadaan ketika pekerjaan sudah selesai tetapi elemen tetap terlihat. Menetapkan animation-delay: 0.2s; menunda awal animasi, sehingga spinner hanya muncul jika waktu tunggunya tidak langsung selesai. Ini adalah properti CSS biasa yang Anda tambahkan ke aturan .loader setelah menyalinnya.