כפתור בשליחה

aria-busy ו-disabled יחד: הכפתור מודיע שהוא עסוק וגם מונע לחיצה כפולה. זה החלק שנשכח הכי הרבה. כפתור בשליחה הוא מחוון טעינה מתוך טעינה והמתנה של כליקס. מה שמורידים הוא קטע HTML ו-CSS בלי תמונות ובלי GIF. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים בכפתור וטעינה. באותה סדרה יש גם ספינר קלאסי, טבעת כפולה ושלוש נקודות.

מחוון טעינה · כפתור · טעינה

.klix-btn-loading { display: inline-flex; align-items: center; gap: .55rem;
  font: inherit; font-weight: 700; padding: .7rem 1.3rem; border: 0; border-radius: .8rem;
  background: #4338ca; color: #fff; cursor: progress }
.klix-btn-loading::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: klix-spin-l .8s linear infinite }
@keyframes klix-spin-l { to { transform: rotate(360deg) } }