Generator Loader / Spinner CSS

Sejarah singkat animasi CSS yang menggerakkan spinner Anda

Aturan @keyframes dan singkatan animation yang dihasilkan oleh generator ini didefinisikan di CSS Animations Module Level 1. Working Draft W3C pertama diterbitkan pada 20 Maret 2009 dan spec akhirnya mencapai Rekomendasi W3C pada 11 Desember 2018, sembilan tahun kemudian. Saat itu, setiap browser yang dikirim telah mendukung sintaks selama bertahun-tahun: Safari 4 (Juni 2009) dengan awalan -webkit-, Firefox 5 (Juni 2011), Internet Explorer 10 (Oktober 2012), dan tanpa awalan oleh Chrome 43 pada April 2015. CSS Animations Module Level 2 adalah Working Draft saat ini dan menambahkan animasi yang digerakkan oleh scroll melalui animation-timeline (dikirim di Chrome 115, Juli 2023; Safari dan Firefox menyusul akhir 2024). Rotasi pada preset «spinner» berasal dari CSS Transforms Module Level 1, spec terpisah di Candidate Recommendation sejak Februari 2019 tetapi dikirim secara universal: transform: rotate(360deg) pada 100% di dalam blok @keyframes adalah yang memutar cincin.

Aksesibilitas tidak opsional: preferensi «Kurangi Gerakan»

Setiap sistem operasi yang dirilis sejak 2014 mengirim pengaturan aksesibilitas «Kurangi Gerakan», macOS «Kurangi gerakan» (di Aksesibilitas → Tampilan), iOS «Kurangi Gerakan», Windows «Tampilkan animasi», Android «Hapus animasi», GNOME «Aktifkan animasi» mati. Media query prefers-reduced-motion (didefinisikan dalam Media Queries Level 5, Working Draft Publik Pertama W3C November 2017) memungkinkan CSS Anda mendeteksi preferensi ini dan menghentikan spinner. Selalu bungkus spinner apa pun dalam:

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

WCAG 2.1 Kriteria Sukses 2.3.3 «Animasi dari Interaksi» (Level AAA, Rekomendasi W3C 5 Juni 2018) mengharuskan setiap animasi gerakan yang dipicu oleh interaksi dapat dinonaktifkan kecuali gerakan tersebut esensial. Spinner jarang esensial. WCAG 2.2 (Oktober 2023) mewarisi aturan yang sama.

Untuk pembaca layar, bungkus spinner dalam <div role="status" aria-live="polite"> dengan teks «Memuat…» yang tersembunyi secara visual. Ketika pemuatan selesai, ganti kontennya; region live mengumumkan «Dimuat» ke teknologi bantuan tanpa berteriak. Atur aria-busy="true" pada region yang berisi saat memuat dan aria-busy="false" setelahnya. Pola ini didokumentasikan dalam bab live-regions Panduan Praktik Penulisan ARIA W3C.

Mengapa spinner CSS tetap halus pada 60 fps

Pipeline rendering browser modern memiliki tiga tahap: layout (menghitung posisi), paint (mengisi piksel), dan composite (menggabungkan lapisan pada GPU). Properti transform dan opacity adalah dua-duanya yang melewati layout dan paint dan berjalan murni pada thread compositor. Menganimasinya pada dasarnya gratis pada framerate apa pun. Menganimasi width, height, top, left, margin, atau apa pun yang mengubah box model memaksa lulus layout-dan-paint lengkap pada setiap frame dan cepat turun di bawah 60 fps pada perangkat low-end. Setiap preset di generator ini menganimasi hanya transform dan opacity karena alasan ini. Jika Anda perlu petunjuk untuk browser, will-change: transform (didefinisikan dalam CSS Will Change Module Level 1, W3C Candidate Recommendation 26 April 2022) mempromosikan elemen ke lapisan compositornya sendiri; gunakan dengan hemat karena setiap lapisan memakan memori GPU.

Kapan spinner adalah jawaban yang benar, dan kapan tidak

Dalam Response Times: The 3 Important Limits (1993, dinyatakan ulang 2014), Jakob Nielsen dari Nielsen Norman Group mendefinisikan tiga ambang persepsi: 0,1 detik adalah «instan», 1 detik adalah batas untuk aliran pikiran tanpa gangguan, 10 detik adalah batas untuk menjaga perhatian pengguna. Petakan strategi loader Anda dengan ini:

• Kurang dari 1 detik: tidak ada indikator. Spinner yang berkedip selama 300 ms lebih buruk daripada tanpa spinner: mata mendaftarkan kedipan sebagai glitch.
• 1 hingga 5 detik: spinner tak tentu atau bilah gaya barber-pole. Memberitahu pengguna «sesuatu sedang terjadi» tanpa berkomitmen pada durasi.
• 5 hingga 10 detik: sebuah <progress max="100" value="42"> yang ditentukan dengan persentase. Pengguna lebih bisa mentolerir penantian panjang ketika mereka bisa melihat kemajuan.
• Navigasi rute SPA: layar skeleton (kotak placeholder abu-abu yang meniru tata letak akhir) terasa lebih cepat daripada spinner. Luke Wroblewski menciptakan istilah ini dalam postingan Maret 2013 Mobile First Patterns; «shimmer» Facebook (2014) dan Material 2 Google (Mei 2018) menjadikannya mainstream.

Fungsi easing dan bagaimana setiap fungsi terasa

Properti animation-timing-function (dan CSS Easing Functions Module Level 1, Candidate Recommendation 6 Desember 2022) memilih bagaimana nilai berkembang antara keyframe:

• linear, laju konstan. Benar untuk spinner kontinu; salah untuk apa pun yang melambat ke keadaan akhir.
• ease, ease-in, ease-out, ease-in-out, alias kata kunci untuk kurva cubic bezier umum. Default browser adalah ease.
• cubic-bezier(x1, y1, x2, y2), kurva kustom dengan empat float dalam [0, 1]. cubic-bezier(.25, .1, .25, 1) adalah kurva «ease» standar. Coba cubic-bezier(.68, -.55, .27, 1.55) untuk efek pantulan «overshoot».
• steps(n, jump-end), lompatan diskrit, ideal untuk loader titik yang menukar keadaan tanpa menginterpolasi.

Kesalahan umum

• Mengirim spinner tanpa prefers-reduced-motion. Pengguna dengan gangguan vestibular, pemicu migrain, atau sensitivitas perhatian dihantam oleh setiap cincin berputar di web. Perbaikannya adalah dua baris CSS.
• Lupa role="status" dan teks yang tersembunyi secara visual. Spinner yang hanya berputar secara visual tidak mengatakan apa-apa kepada pengguna pembaca layar.
• Kecepatan animasi di bawah 0,5 detik per siklus. Spinner yang selesai dalam 0,3 detik terasa panik dan terbaca sebagai «kesalahan» oleh banyak pengguna. 1 hingga 1,5 detik per siklus adalah rentang yang nyaman.
• Menganimasikan properti tata letak. Menganimasikan width, margin, atau top menyebabkan thrashing tata letak. Tetap dengan transform dan opacity.
• Menampilkan spinner untuk setiap operasi. Jika data tiba dalam 100 ms, spinner berkedip dan terbaca sebagai glitch. Tunda spinner 200 hingga 300 ms dengan setTimeout yang Anda hapus saat berhasil.
• Lupa untuk memusatkan spinner. Sebuah `.spinner` yang mengapung di kiri atas bagian karena kontainernya bukan kontainer flex/grid adalah bug visual paling umum kedua.

Pertanyaan yang lebih sering diajukan

Apakah spinner ini akan bekerja di browser lama?

Semua browser modern (Chrome 43+, Firefox 16+, Safari 9+, Edge 12+) mendukung @keyframes dan transform tanpa awalan apa pun. Internet Explorer 10 dan 11 memerlukan awalan -ms- di beberapa tempat tetapi sebaliknya bekerja. IE 9 dan lebih rendah tidak memiliki dukungan animasi CSS: jatuh ke GIF animasi, atau gunakan @supports (animation: spin 1s) untuk deteksi fitur.

Bagaimana cara menghentikan spinner ketika konten dimuat?

Hapus elemen dari DOM, sembunyikan dengan display: none atau atribut hidden, atau jeda animasi dengan animation-play-state: paused. Menjeda adalah yang termurah jika Anda mungkin menampilkannya lagi. Jika Anda menggunakan pola ARIA, juga atur aria-busy="false" pada kontainer dan ganti teks pemuatan dengan pengumuman keadaan dimuat.

Bisakah saya menyesuaikan warna spinner lebih jauh dari yang diizinkan picker?

Ya. CSS output menggunakan nilai hex / rgb / hsl reguler; ganti dengan variabel CSS (var(--brand-primary)) agar spinner mengikuti design system Anda. Untuk spinner dwiwarna, edit singkatan border-color: border-color: var(--brand) transparent transparent transparent memberikan tampilan klasik «busur seperempat».

Mengapa tidak hanya menggunakan animasi SVG atau Lottie?

Spinner CSS berbobot di bawah 200 byte, tidak memerlukan permintaan tambahan, tidak ada runtime JavaScript, dan dirender sebelum sumber daya eksternal apa pun dimuat. SVG bagus untuk bentuk yang kompleks; Lottie bagus untuk animasi yang dibuat oleh desainer dari After Effects. Untuk indikator generik «sesuatu sedang memuat», CSS adalah alat termurah yang melakukan pekerjaan dengan benar.

Apakah ada yang dilacak atau dikirim ke server?

Tidak. Generator berjalan sepenuhnya di JavaScript browser Anda. Pilihan warna, penyesuaian ukuran, dan CSS yang disalin tidak pernah meninggalkan halaman. Verifikasi di tab Jaringan DevTools.