Generator Loader CSS

Apa itu Generator Loader CSS?

Generator Loader CSS adalah alat gratis di browser untuk desainer web dan pengembang front-end yang membutuhkan indikator pemuatan CSS murni tanpa menambahkan pustaka. Pilih dari lima gaya - spinner, cincin, titik, batang, dan pulsa - lalu kendalikan ukuran dalam piksel, warna utama, kecepatan satu siklus animasi dalam detik, ketebalan garis, dan jumlah titik atau batang. Pratinjau langsung beranimasi saat Anda mengedit, dan markah HTML beserta blok gaya CSS dengan @keyframes diperbarui secara instan sehingga Anda bisa langsung menempelkannya ke sebuah halaman. Gunakan untuk tombol, loader halaman, status skeleton, dan placeholder asinkron, atau untuk mempelajari bagaimana animasi CSS dan @keyframes menggerakkan setiap efek.

Cara menggunakan Generator Loader CSS

1. Pilih gaya loader: Spinner, Cincin, Titik, Batang, atau Pulsa.
2. Atur ukuran dalam piksel dan pilih warna dengan contoh warna atau dengan mengetikkan nilai.
3. Atur kecepatan animasi dalam detik untuk satu siklus penuh.
4. Buka Pengaturan untuk menyesuaikan ketebalan garis (spinner dan cincin) atau jumlah titik atau batang.
5. Lihat animasi pratinjau langsung, lalu salin HTML dan CSS yang dihasilkan dengan tombol salin.

Contoh

Gaya: Spinner, ukuran 48px, warna #4f86f7, kecepatan 1s, ketebalan 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Gaya: Titik, ukuran 48px, warna #9333ea, kecepatan 1s, jumlah 3

<div class="dd-loader"><div></div><div></div><div></div></div> dengan animation-delay bertahap sehingga titik membesar-mengecil seperti gelombang.

Pertanyaan yang sering diajukan

Gaya loader apa saja yang tersedia?

Lima: Spinner (busur yang berputar), Cincin (cincin berputar yang lebih tebal), Titik (titik yang membesar-mengecil seperti gelombang), Batang (batang yang meregang naik dan turun), dan Pulsa (satu lingkaran yang berdenyut). Ganti dengan menu gaya dan pratinjau serta kode diperbarui secara instan.

Apa fungsi kontrol ukuran, warna, dan kecepatan?

Ukuran menetapkan dimensi piksel loader, warna menetapkan warna utama (gunakan pemilih warna atau ketik warna CSS apa pun), dan kecepatan adalah durasi satu siklus animasi dalam detik. Ketebalan mengontrol garis untuk spinner dan cincin, sedangkan jumlah mengontrol berapa banyak titik atau batang yang muncul.

Apakah CSS yang dihasilkan adalah CSS murni tanpa JavaScript?

Ya. Cuplikan ini adalah HTML biasa plus blok <style> yang menggunakan animasi CSS dan @keyframes, jadi berjalan tanpa JavaScript atau pustaka eksternal apa pun. Tempelkan ke halaman Anda dan ia bekerja sendiri.

Mengapa ketebalan dan jumlah tidak mengubah setiap gaya?

Ketebalan hanya memengaruhi spinner dan cincin (yang menggambar batas), sedangkan jumlah hanya memengaruhi titik dan batang (yang merender beberapa elemen). Gaya lainnya mengabaikannya, sehingga keluaran tetap bersih untuk gaya yang Anda pilih.

Apakah ada yang diunggah ke server?

Tidak. Loader dan CSS-nya dibangun sepenuhnya di browser Anda dengan perhitungan string lokal - tidak ada pengaturan, warna, atau kode yang pernah dikirim ke server, jadi ia bekerja offline dan menjaga pekerjaan Anda tetap privat.