Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Jalur tugas / dari masukan ke hasil

Pilih gaya loader

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Loader CSS, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara mendesain loader CSS

  1. 01

    Pilih gaya loader

    Buka Gaya loader dan pilih Cincin orbit untuk cincin berputar klasik atau Tiga titik untuk trio titik yang memantul. Pratinjau langsung beranimasi setiap kali Anda mengubah sesuatu, dan setiap gaya menyertakan @keyframes-nya sendiri saat diekspor.

  2. 02

    Atur ukuran bingkai dan goresan

    Gunakan bingkai 24–160 px dan garis atau titik 2–20 px. Garis cincin harus kurang dari separuh bingkai. Tiga titik dengan jarak minimal 2 px harus muat; jika tidak, salin dan unduh dinonaktifkan. Ukuran cincin yang diekspor mencakup border.

  3. 03

    Sesuaikan kecepatan dan warna

    Pilih Durasi siklus dari 0,2 hingga 4 detik dengan langkah 0,05 detik. Warna aktif mewarnai tepi atas cincin atau titik tengah; Warna lintasan mewarnai bagian cincin lainnya atau dua titik luar. Siklus lambat terasa seperti pekerjaan latar yang tenang; siklus cepat terasa mendesak.

  4. 04

    Atau mulai dari contoh

    Tekan Muat contoh untuk menerapkan preset Tiga titik yang berani — bingkai 72 px, titik 12 px, dan siklus 0,75 detik dalam warna merah dan kuning — sebagai titik awal. Atur ulang selalu mengembalikan cincin orbit bawaan.

  5. 05

    Salin atau unduh CSS

    Tekan Salin CSS untuk menaruh ruleset ke papan klip, atau Unduh .css untuk menyimpan toolars-loader.css. Panel keluaran menampilkan jumlah byte persis yang Anda ekspor, dan kedua tombol tetap nonaktif selama ada nilai yang gagal validasi.

  6. 06

    Pasang ke markup Anda

    Cincin orbit butuh satu elemen berkelas .loader; Tiga titik mengharapkan tiga anak span di dalamnya. Keluaran menyertakan blok prefers-reduced-motion yang menghentikan animasi bagi pengunjung yang sensitif terhadap gerakan.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Loader CSS menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Kapan Generator Loader CSS berguna

Buat cincin orbit jingga

Pada uji browser lokal 24-09-2026, pilih Cincin orbit, bingkai 64 px, garis 8 px, siklus 1,2 dtk, warna aktif #ff6600, dan warna lintasan #dfe3ea. Pratinjau tetap valid. CSS .loader hasil ekspor memuat lebar dan tinggi 64px, border 8px #dfe3ea, border atas jingga, dan toolars-spin 1.2s linear infinite.

Ekspor sampel tiga titik

Muat sampel menerapkan Tiga titik dengan bingkai 72 px, titik 12 px, siklus 0,75 dtk, #f21a10 di tengah, dan #ffd11a di luar. CSS memakai gap 18px serta jeda -0.25s dan -0.5s. Dalam uji lokal, teks salinan sama persis dengan toolars-loader.css yang diunduh, sepanjang 695 byte UTF-8.

Perbaiki titik yang tidak muat

Saat sampel tiga titik aktif, kecilkan bingkai menjadi 24 px dan pertahankan titik 12 px. Pratinjau menampilkan CHECK VALUES dan pesan bahwa titik beserta celahnya harus muat dalam bingkai. CSS dikosongkan; Salin CSS dan Unduh .css nonaktif. Kembalikan 72 px untuk memulihkan CSS 695 byte dan kedua tindakan.

Apa yang sebenarnya dilakukan Generator Loader CSS

Dasbor yang memuat ulang data setiap beberapa detik membutuhkan spinner yang serasi dengan palet merek; tombol checkout perlu status sibuk selama pembayaran dikonfirmasi; prototipe layak mendapatkan sesuatu yang lebih baik daripada bawaan browser. Menetapkan bingkai, goresan, dan irama secara visual berarti loader sudah tepat sebelum satu baris pun masuk ke stylesheet — dan karena generator berjalan sepenuhnya di tab ini, warna dan penamaan produk yang belum dirilis tidak pernah meninggalkan mesin. Ekspor tinggal satu klik begitu gerakannya terasa pas.

Pertanyaan umum

HTML apa yang diharapkan oleh CSS yang dihasilkan?
Cincin orbit bekerja dengan satu elemen berkelas .loader. Tiga titik mengharapkan tiga anak span di dalam .loader; stylesheet mengatur jeda animasi mereka secara otomatis, jadi markup tetap sederhana dan tidak butuh kelas tambahan.
Mengapa pratinjau menampilkan PERIKSA NILAI?
Gunakan bingkai 24–160 px dan garis atau titik 2–20 px. Garis cincin harus kurang dari separuh bingkai. Tiga titik dengan jarak minimal 2 px harus muat; jika tidak, salin dan unduh dinonaktifkan. Ukuran cincin yang diekspor mencakup border.
Bagaimana ketiga titik tetap sinkron?
Stylesheet mengatur koreografinya: span tengah mengambil Warna aktif, dan span kedua serta ketiga menerima jeda animasi negatif sebesar sepertiga dan dua pertiga siklus, sehingga pantulannya berjenjang merata di sepanjang loop.
Apakah loader menghormati pengaturan reduced-motion?
Ya. Setiap keluaran diakhiri dengan media query untuk prefers-reduced-motion yang mematikan animasi — varian titik juga berhenti pada opasitas yang stabil — sehingga pengunjung yang meminta lebih sedikit gerakan mendapatkan indikator statis yang tenang, bukan yang berputar.
Bisakah saya menyesuaikan loader setelah menempelkannya ke proyek?
Tentu; keluarannya adalah CSS polos dengan nilai yang mudah dibaca. Ubah ukuran piksel, durasi, atau warna langsung di stylesheet Anda — @keyframes juga deklarasi biasa, jadi setiap bagian loader tetap bisa diedit setelah ekspor.
Apakah pengaturan saya diunggah ke mana pun?
Tidak. Generator berjalan sepenuhnya di dalam tab browser saat ini, tidak butuh akun, dan tidak ada nilai yang masuk ke penyimpanan, log, analitik, atau jaringan. Tekan Atur ulang untuk mengembalikan bawaan; menutup tab akan membuang semuanya.

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat

Generator Pola Latar CSS

CSS Background Pattern Generator

Susun pola latar titik, kisi, atau diagonal dari gradien CSS murni tanpa berkas gambar, dengan ukuran ubin, lebar tanda, dan dua warna yang dapat disetel.

Buat