Softonic

Generator CSS Spinner untuk Tombol

Langkah 1 / 2
Berikutnya

Spinner di dalam tombol memberi tahu pengunjung bahwa klik mereka berhasil dan mereka tidak perlu menekan lagi. Buat ring kecil dan tipis di sini, lalu salin CSS-nya dan letakkan di samping label tombol.

Cara membuat spinner untuk tombol

  1. 1

    Gunakan ukuran kecil

    Masukkan 16 atau 18 pada kolom Ukuran (px) agar ring sesuai dengan tinggi teks tombol.

  2. 2

    Buat ring tipis

    Atur Ketebalan ke 2 agar busur tetap tajam pada ukuran ini.

  3. 3

    Samakan warnanya

    Pilih Warna untuk busur yang bergerak, misalnya putih pada tombol gelap.

  4. 4

    Percepat sedikit lalu salin

    Coba 0,8 detik per putaran, lalu salin CSS-nya.

Contoh pengerjaan

Misalkan Anda memiliki tombol “Simpan” berwarna biru tua dengan teks putih. Di generator, masukkan ukuran 16, ketebalan 2, warna #ffffff, dan kecepatan 0,8. Alat ini menghasilkan:

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Jalur ring berwarna abu-abu muda tetap, yang terlihat jelas di atas tombol gelap. Jika Anda menginginkan jalur yang lebih halus, ubah #eee menjadi nilai transparan, misalnya rgba(255, 255, 255, 0.3), di CSS yang Anda tempel. Warna busur tetap sesuai pilihan Anda.

Tempatkan di dalam tombol

Letakkan elemen spinner sebelum label dan jadikan tombol sebagai baris flex agar keduanya berada pada satu baris dengan jarak:

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="Menyimpan"></span>
  Menyimpan
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

Tambahkan spinner dan status disabled hanya saat permintaan sedang berjalan. Hapus keduanya saat permintaan selesai. Menonaktifkan tombol mencegah pengiriman ganda; spinner adalah sinyal yang menjelaskan alasannya.

Ukuran dan ketebalan untuk tombol

Ukuran teks tombol Ukuran spinner Ketebalan
14 px 14 px 2 px
16 px 16 hingga 18 px 2 px
18 hingga 20 px 20 hingga 24 px 3 px

Catatan

  • Generator membuat satu ring berbentuk lingkaran. Generator tidak membuat tombol, sehingga gaya tombol tetap menjadi milik Anda.
  • Ring yang lebih tebal dari seperempat diameternya akan penuh dan tampak seperti cakram, jadi gunakan nilai tipis untuk ukuran kecil.
  • Biarkan label berada di samping spinner. Spinner tanpa teks bisa sulit dipahami bagi sebagian pengguna.

Hindari pergeseran tata letak

Jika spinner muncul dan tombol tiba-tiba melebar, tata letak akan bergeser dan area klik ikut berpindah. Dua cara mudah bisa membantu. Berikan tombol lebar minimum yang sudah cukup untuk spinner dan label yang lebih panjang. Atau sediakan ruang spinner sejak awal dengan menampilkan placeholder kosong 16 px sebelum label. Karena ring yang dihasilkan memiliki lebar dan tinggi tetap dalam piksel, mudah untuk menyediakan ruang yang persis dibutuhkannya.

Pertanyaan yang Sering Diajukan

Kira-kira setinggi teks tombol, biasanya 14 hingga 20 piksel. Dengan begitu tombol tidak membesar saat spinner muncul.

Ya, pada sebagian besar formulir. Menonaktifkan mencegah pengiriman ganda, dan spinner menjelaskan kepada pengunjung mengapa tidak ada yang lain bisa diklik.

Jalurnya abu-abu muda dan busurnya berwarna pilihan Anda. Pada tombol terang, pilih warna busur yang lebih gelap dan ubah warna jalur di CSS yang Anda tempel.

Tidak. Generator hanya menghasilkan CSS untuk ring. Apakah label tetap, diubah, atau disembunyikan bergantung pada markup Anda.

Alat Terkait

Generator Konfigurasi Webpack

Buat webpack.config.js untuk webpack 5 bagi JavaScript biasa, React, atau Vue: TypeScript, Babel, CSS atau Sass, gambar, HtmlWebpackPlugin, server pengembangan, dan baris npm install.

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Validator XSD

Validasi dokumen XML terhadap skema XSD dan laporkan ketidakcocokan elemen dan tipe dengan nomor baris persis.

Dekoder Protocol Buffers

Dekode byte wire-format Protobuf secara lokal dari hex, Base64, Base64URL, teks, atau file; periksa kandidat field yang tepat dan ekspor laporan privat.

XML Formatter

Pretty-print dokumen XML dengan indentasi konsisten dan tangkap kesalahan well-formedness lengkap dengan nomor baris persis.

Alat ini tersedia dalam bahasa lain

Panduan dan contoh penggunaan