स्केलेटन

आउन लागेको सामग्रीको आकार अघि देखाएर, अक्षर भरिँदा पर्दा नउफ्रियोस् भन्नका लागि प्रयोग गर्ने टुक्रा।

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

स्रोत

HTML CSS

<div class="dc-skel">
  <p class="dc-sr" role="status">내용을 불러오는 중입니다</p>
  <div class="dc-skel__card" aria-hidden="true">
    <div class="dc-skel__shape dc-skel__media"></div>
    <div class="dc-skel__stack">
      <div class="dc-skel__shape dc-skel__line dc-skel__line--title"></div>
      <div class="dc-skel__shape dc-skel__line"></div>
      <div class="dc-skel__shape dc-skel__line dc-skel__line--short"></div>
    </div>
  </div>
</div>

.dc-skel { max-width: 420px; font-family: var(--dc-font); }
.dc-skel__card {
  display: flex; flex-direction: column; gap: var(--dc-3);
  padding: var(--dc-4);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  background: var(--dc-surface);
}
.dc-skel__stack { display: flex; flex-direction: column; gap: var(--dc-2); flex: 1 1 auto; min-width: 0; }
.dc-skel__shape {
  position: relative; overflow: hidden;
  background: var(--dc-sunken);
  border-radius: var(--dc-r-xs);
}
.dc-skel__shape::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dc-text) 9%, transparent), transparent);
  animation: dc-skel-pass 1400ms ease-in-out infinite;
}
.dc-skel__media { height: 140px; border-radius: var(--dc-r-sm); }
.dc-skel__line { height: 12px; }
.dc-skel__line--title { height: 16px; width: 62%; }
.dc-skel__line--short { width: 40%; }
.dc-skel__avatar { flex: none; width: 44px; height: 44px; border-radius: var(--dc-r-full); }
.dc-skel__list { display: flex; flex-direction: column; gap: var(--dc-4); margin: 0; padding: 0; list-style: none; }
.dc-skel__row { display: flex; align-items: center; gap: var(--dc-3); }
@keyframes dc-skel-pass { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .dc-skel__shape::after { display: none; }
}

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

वास्तविक सामग्रीजत्तिकै उचाइ र त्यति लाइनमा बनाउनुहोस् — फरक भए पर्दा उफ्रन्छ
पहिलो लोडमा मात्र प्रयोग गर्नुहोस्; पहिले देखेको सूची फेरि लोड गर्दा पुरानै सामग्री राखी स्पिनर देखाउनुहोस्
एक–दुई बाकस नभई पूरै गाँसो भर्न प्रयोग गर्नुहोस्

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

आकारहरूमा aria-hidden दिनुहोस् र पढिने एक लाइन छुट्टै राख्नुहोस्
चमक अनन्तसम्म न घुमाउनुहोस् — असफल भए त्रुटि अवस्थामा बदल्नुहोस्

अर्को

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

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

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

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