स्पिनर

केही सेकेन्डको, गन्न मिल्ने कुरा नभएको प्रतीक्षामा मात्र प्रयोग गर्ने टुक्रा।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

<div class="dc-spin" role="status">
  <span class="dc-spin__ring" aria-hidden="true"></span>
  <span class="dc-spin__text">수강생 명단을 불러오는 중…</span>
</div>

.dc-spin { display: inline-flex; align-items: center; gap: var(--dc-3); font-family: var(--dc-font); }
.dc-spin__ring {
  flex: none; width: 22px; height: 22px;
  border: 3px solid color-mix(in srgb, var(--dc-brand) 22%, transparent);
  border-top-color: var(--dc-brand);
  border-radius: var(--dc-r-full);
  animation: dc-spin-turn 800ms linear infinite;
}
.dc-spin__ring--sm { width: 16px; height: 16px; border-width: 2px; }
.dc-spin__ring--lg { width: 34px; height: 34px; }
.dc-spin__ring--on {
  width: 16px; height: 16px; border-width: 2px;
  border-color: color-mix(in srgb, var(--dc-text-on) 40%, transparent);
  border-top-color: var(--dc-text-on);
}
.dc-spin__text { font-size: 14px; color: var(--dc-text); }
.dc-spin__sub { font-size: 12px; color: var(--dc-text-mute); }
.dc-spin__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dc-2);
  min-height: 44px; padding: 0 var(--dc-5);
  border: 0; border-radius: var(--dc-r-sm);
  background: var(--dc-brand); color: var(--dc-text-on);
  font-size: 15px; font-weight: 600;
}
.dc-spin__btn[aria-disabled="true"] { opacity: .75; cursor: default; }
.dc-spin--page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--dc-2); min-height: 190px; padding: var(--dc-6);
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
  background: var(--dc-surface); text-align: center;
}
@keyframes dc-spin-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dc-spin__ring { animation-duration: 1800ms !important; }
}

कसरी प्रयोग गर्ने

छेउमा अक्षर पनि राख्नुहोस् — घुम्ने गोलोले आफैँ कुनै कुरा भन्दैन
दस सेकेन्ड नाघ्ने काममा प्रगति पट्टी वा स्केलेटन प्रयोग गर्नुहोस्
पूरै पर्दा न ढाक्नुहोस् — बदलिने भागभित्र मात्र राख्नुहोस्

ध्यान दिनुपर्ने कुरा

role=status बिना स्क्रिन रिडरलाई कुनै खबरै पुग्दैन
चाल घटाएका प्रयोगकर्तालाई घुमाइ सुस्त बनाउनुहोस् — पूरै रोकिए बिग्रेको जस्तो लाग्छ

अर्को

छोटो सूचना पट्टी प्रतिक्रिया एप

तानेर ताजा गर्ने प्रतिक्रिया एप

गोलो प्रगति प्रतिक्रिया एप वेब

चरण बिन्दु प्रतिक्रिया एप