Buton İçin CSS Spinner Oluşturucu

Çalışılmış bir örnek

Beyaz yazılı koyu mavi bir “Kaydet” butonunuz olduğunu varsayalım. Oluşturucuda boyut 16, kalınlık 2, renk #ffffff ve hız 0,8 girin. Araç şunu üretir:

.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); }
}

Halkanın izi sabit, açık gri bir renktir ve koyu bir butonda iyi görünür. Daha silik bir iz isterseniz kopyaladığınız CSS’te #eee değerini rgba(255, 255, 255, 0.3) gibi yarı saydam bir değerle değiştirin. Yay rengi, seçtiğiniz renk olarak kalır.

Spinner’ı butonun içine yerleştirin

Spinner öğesini etiketten önce koyun ve butonu bir flex satırına çevirerek ikisinin aralarında boşlukla tek satırda durmasını sağlayın:

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

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

Spinner’ı ve disabled durumunu yalnızca istek çalışırken ekleyin. İstek bittiğinde ikisini de kaldırın. Butonu devre dışı bırakmak tekrarlanan gönderimleri önler; spinner ise bunun nedenini açıklayan sinyaldir.

Buton için boyut ve kalınlık

Notlar

• Oluşturucu tek bir dairesel halka üretir. Buton oluşturmaz; bu yüzden buton stilleriniz size aittir.
• Çapının dörtte birinden kalın bir halka dolar ve bir diske benzer; bu yüzden küçük boyutlarda ince değerler kullanın.
• Etiketi spinner’ın yanında tutun. Metni olmayan bir spinner bazı kullanıcılar için yorumlanması zor olabilir.

Yerleşim sıçramalarından kaçının

Spinner belirdiğinde buton aniden genişlerse yerleşim kayar ve tıklama alanı yer değiştirir. İki kolay çözüm yardımcı olur. Butona, spinner’a ve daha uzun etikete yetecek bir minimum genişlik verin. Ya da spinner’ı etiketten önce boş bir 16 px yer tutucu göstererek alanı baştan ayırın. Oluşturulan halka piksel cinsinden sabit genişlik ve yüksekliğe sahip olduğu için ihtiyaç duyduğu alanı tam olarak ayırmak kolaydır.