Cara menggunakan Generator CSS Loader
- Klik loader di galeri — setiap kotak sudah berjalan langsung.
- Atur ukuran, ketebalan, kecepatan, dan warna; semua kotak ikut berubah bersamaan.
- Ganti nama kelas CSS jika bentrok dengan proyekmu.
- Salin HTML dan CSS (atau versi React), lalu tempelkan ke halaman kamu.
Kenapa pakai loader CSS murni?
Spinner CSS hanya beberapa ratus byte, tidak perlu request gambar atau JavaScript, tetap tajam di ukuran berapa pun, dan warnanya bisa diubah hanya dengan satu variabel. Setiap loader di sini dibangun dari satu elemen (ditambah beberapa span untuk titik dan batang) dan dianimasikan dengan transform serta opacity, sehingga tetap mulus meski thread utama sedang sibuk memuat aplikasimu.
Kustomisasi dengan variabel CSS
CSS yang dihasilkan menyediakan --size, --color, --track, --thickness, dan --speed pada kelas loader, jadi kamu bisa membuat varian putih kecil untuk tombol tanpa menyalin CSS-nya: <span class="loader" style="--size:18px;--color:#fff">.
Aksesibilitas
- Loader memiliki
role="status"dan label “Memuat…” yang tersembunyi secara visual, sehingga screen reader bisa mengumumkannya. - Saat reduced motion aktif, animasi melambat alih-alih berhenti — spinner yang membeku terlihat seperti aplikasi crash.
- Tampilkan loader hanya setelah sekitar 300 ms; loader yang berkedip untuk permintaan cepat terasa lebih lambat daripada tanpa loader sama sekali.
Mau animasi loading custom? Buat di generator animasi CSS dan atur easing-nya dengan generator cubic-bezier.
Juga dicari sebagai: css loader, css spinner, loading spinner css, animasi loading css, spinner css murni, css preloader, contoh loading css.
Tool yang cocok dipakai bersama Generator CSS Loader
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
- Generator Box Shadow — Tumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu salin CSS box-shadow atau text-shadow.
- Generator CSS Keyframes — Editor visual untuk @keyframes.
- Generator Animasi Hover CSS — Rancang animasi hover untuk tombol, kartu, tautan, dan ikon.
Pertanyaan yang sering diajukan
Bisakah saya memakai loader ini di proyek komersial?
Bagaimana cara menampilkan loader hanya saat ada sesuatu yang sedang dimuat?
hidden) saat data sudah datang. Di React, render secara kondisional: {loading && <Loader />}.Apakah bisa dipakai di dalam tombol?
style="--size:16px;--thickness:2px;--color:currentColor".