Lompat ke alat
JoeLucky

Klik ★ pada alat untuk menyimpannya

Kategori Alat

Kode ke GambarPembuat Gradien CSSGlassmorphism CSSPembuat Box ShadowPembuat Loader CSSPembuat Blob SVGSVG ke PNGPemeriksa Kontras WarnaPengubah PX / REM / EM
JoeLucky

Alat online praktis, semua di satu tempat

Kebijakan PrivasiKetentuan Layanan

© 2026 JoeLucky®. Hak cipta dilindungi.

  1. JoeLucky
  2. /CSS & Desain
  3. /Pembuat Loader CSS

Pembuat Loader CSS

Buat indikator pemuatan dengan CSS murni.

Pilih jenis animasi

Pengaturan

#6366F1
Ukuran40px
Kecepatan (dtk)1.0s

⚡ Nilai lebih kecil = animasi lebih cepat

Pratinjau — Spinner
Kode CSS
<!-- HTML -->
<div class="loader" style="width:40px;height:40px"></div>

<!-- CSS -->
<style>
.loader {
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>

CSS & DESAIN SERUPA

Lihat semua
Kode ke Gambar

Ubah potongan kode menjadi tangkapan layar yang menarik.

Buka →
Pembuat Gradien CSS

Rancang gradien linear, radial, dan conic secara visual lalu salin CSS-nya.

Buka →
Glassmorphism CSS

💬 Komentar

?

Belum ada komentar. Jadilah yang pertama!

APA ITU Pembuat Loader CSS?

Pilih dari 10 animasi pemuatan CSS murni, atur warna, ukuran, dan kecepatan, lalu salin HTML dan CSS-nya. Tanpa JavaScript, sehingga bisa dipasang di halaman atau framework apa pun.

Cara memakai

  1. Pilih dari 10 jenis animasi: spinner untuk pemuatan halaman penuh, titik untuk indikator chat, skeleton untuk placeholder konten, ripple untuk umpan balik tombol, dan lainnya.
  2. Atur warna (pemilih), ukuran (20–80px), dan kecepatan (0,3–3,0 dtk) di kiri. Pratinjau kisi titik-titik di kanan diperbarui langsung.
  3. Kecepatan lebih rendah = animasi lebih cepat. 0,8–1,5 dtk paling cocok untuk kebanyakan loader; di bawah 0,5 dtk terasa panik, di atas 2 dtk terasa macet.
  4. Tiga tombol salin di header pratinjau: “HTML” hanya markup, “CSS” hanya gaya, “Salin Semua” untuk blok lengkap berkomentar.
  5. Semua animasi adalah CSS murni tanpa dependensi JavaScript — tempel langsung ke HTML statis, React, Vue, atau framework apa pun.

Pertanyaan yang sering diajukan

Jenis animasi pemuatan CSS apa saja yang tersedia?

Lingkaran berputar, titik memantul, bilah progres, gelombang, denyut, dan lainnya — semuanya CSS murni.

Apakah animasi ini memerlukan JavaScript?

Tidak. Semua animasi adalah CSS murni tanpa ketergantungan pada JavaScript.

Bisakah saya mengustomisasi warna dan ukuran?

Bisa. Pemilih warna dan kontrol ukuran dengan pratinjau instan dan keluaran CSS.

Buat kode blur latar belakang dan batas tembus pandang secara langsung.

Buka →