LocalToolsKumpulan alat browser offline

Kategori: Alat pengembang

Generator Spinner Pemuatan CSS

Ide kami sendiriAlatnya tidak ada?

Rancang indikator pemuatan CSS yang ringan secara lokal dan salin kodenya

Buat spinner pemuatan murni CSS dengan pratinjau langsung. Atur ukuran, warna, ketebalan garis, dan kecepatan, lalu salin cuplikan HTML dan CSS. Tanpa JavaScript dan tanpa gambar.

Pratinjau

HTML
<span class="loader" role="status" aria-label="Memuat…"></span>
CSS
.loader {
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 4px solid #dfe4de;
  border-top-color: #2f6f4f;
  border-radius: 50%;
  animation: loader-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader span {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

Setiap cuplikan hanya menganimasikan transform dan opacity, dan diakhiri blok prefers-reduced-motion sehingga animasi berhenti bagi mereka yang meminta sistemnya mengurangi gerakan.

Tanpa JavaScript, tanpa gambar, tanpa font web — dan tidak ada yang keluar dari peramban Anda.

Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.

Apa fungsi alat ini

Indikator pemuatan adalah salah satu dari sedikit tempat di mana beberapa baris CSS mengalahkan pustaka telak-telak: tidak ada skrip untuk dimuat, tidak ada gambar untuk diminta, tidak ada apa pun yang harus disiapkan sebelum hal yang sedang Anda tunggu. Lima templat ini — cincin, cincin ganda, titik, batang, dan denyut — hanya menganimasikan `transform` dan `opacity`, sehingga peramban bisa menjalankannya di kompositor alih-alih menghitung ulang tata letak pada setiap bingkai. Setiap cuplikan diakhiri blok `prefers-reduced-motion`, karena spinner adalah hiasan dan orang yang meminta sistemnya berhenti menggerakkan sesuatu tidak seharusnya duduk menontonnya. Markupnya adalah `<span role="status">` berlabel, sehingga pembaca layar mengumumkan penantian itu alih-alih menemukan kotak kosong.

Cara memakainya

  1. Pilih sebuah templat, lalu atur ukuran, ketebalan, kecepatan, dan warnanya.
  2. Ganti nama kelasnya bila berpotensi bentrok dengan lembar gaya Anda.
  3. Salin HTML dan CSS-nya ke proyek Anda.

Privasi

Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.

Pertanyaan yang sering diajukan

Apakah spinnernya murni CSS?
Ya. Masing-masing adalah sebuah span (dengan beberapa span anak kosong untuk templat titik dan batang) ditambah animasi CSS. Tidak ada JavaScript, SVG, gambar, maupun font web.
Apakah saya perlu JavaScript untuk menjalankannya?
Tidak. Animasinya mulai begitu elemennya ada di dokumen. Anda hanya butuh kode untuk memutuskan kapan menampilkan dan menyembunyikannya.
Bisakah saya mengubah kecepatan dan warnanya?
Bisa — ukuran, ketebalan garis, durasi animasi, warna utama, dan warna jalur semuanya adalah kendali di sini, dan langsung ditulis ke cuplikan yang Anda salin.
Bagaimana dengan pengunjung yang memilih gerakan lebih sedikit?
Setiap cuplikan yang dihasilkan diakhiri media query prefers-reduced-motion yang praktis menghentikan animasinya, jadi indikatornya tetap muncul tetapi tidak berputar bagi mereka yang mengurangi gerakan di tingkat sistem.
Apakah kodenya dibuat secara lokal?
Ya. Pengaturannya, pratinjaunya, dan cuplikan yang dihasilkan tetap di peramban Anda; tidak ada yang diunggah.

Kembali ke semua alat