Generator CSS Spinner Sederhana

Mengapa spinner ini sederhana

Banyak loader memakai beberapa elemen bersarang, gambar latar, atau skrip. Yang ini adalah satu div yang diberi gaya sebagai lingkaran. Ring dibentuk oleh border, dan hanya bagian atas border yang memiliki warna berbeda. Ketika lingkaran berputar, bagian berwarna itu bergerak mengelilinginya. Seluruh tekniknya terdiri dari empat gagasan:

1. Kotak persegi dengan lebar dan tinggi yang sama.
2. border-radius: 50% untuk mengubah kotak menjadi lingkaran.
3. Border abu-abu dengan satu sisi berwarna, yaitu border-top-color.
4. Animasi rotasi yang tidak pernah berhenti.

Kode lengkapnya

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

<div class="loader"></div>

Itulah keseluruhan loader ini. Tidak ada yang perlu diunduh dan tidak ada dependensi yang perlu dijaga pembaruannya.

Memusatkannya

Ring adalah elemen blok biasa. Untuk memusatkannya di halaman atau di dalam kontainer, tambahkan margin: 0 auto; pada .loader untuk pemusatan horizontal, atau jadikan elemen induknya sebagai kontainer flex:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Yang tidak dilakukan alat ini

• Alat ini hanya membuat gaya ring. Baris titik, batang, dan loader berdenyut adalah desain yang berbeda.
• Warna jalur tetap abu-abu muda. Jika latar belakang Anda gelap, ubah di CSS yang Anda tempel.
• Alat ini tidak menambahkan atribut aksesibilitas ke markup Anda. Tambahkan role="status" dan aria-label ke elemen itu sendiri.

Penyesuaian kecil setelah menyalin

Karena spinner hanya terdiri dari beberapa properti, perubahan menjadi mudah. Untuk membuat ring tampak lebih ringan, kurangi lebar border. Untuk membuatnya terasa lebih tenang, tambah durasi animasi. Untuk memakai loader yang sama dalam dua ukuran, salin kelasnya sekali dan timpa hanya width, height, dan border-width di kelas kedua. Kode yang singkat adalah keunggulan utama spinner sederhana: Anda bisa membaca seluruh kodenya sekilas dan mengubah nilai apa pun tanpa mencarinya di pustaka.

Anda juga bisa memberi warna pada jalur dengan mengganti #eee menjadi warna yang cocok dengan halaman Anda, sementara busur yang bergerak tetap memakai warna yang Anda pilih di generator.