लोडिङ ओभरले

भुक्तानी वा पेस गर्ने जस्ता दोहोरो थिच्नु नहुने काममा मात्र पूरै पर्दा छोपी कुराउने तह।

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

स्रोत

HTML CSS

<div class="dc-lo-screen">
  <header class="dc-lo-screen__bar">
    <span class="dc-lo-screen__title">신청서 제출</span>
  </header>
  <div class="dc-lo-screen__body" aria-hidden="true">
    <span class="dc-lo-skel"></span>
    <span class="dc-lo-skel dc-lo-skel--short"></span>
    <span class="dc-lo-skel"></span>
    <span class="dc-lo-skel dc-lo-skel--short"></span>
  </div>
  <div class="dc-lo" role="status" aria-live="assertive">
    <div class="dc-lo__box">
      <span class="dc-lo__spin" aria-hidden="true"></span>
      <p class="dc-lo__msg">제출하는 중이에요<br>창을 닫지 말아 주세요</p>
    </div>
  </div>
</div>

.dc-lo-screen {
  position: relative; overflow: hidden;
  min-height: 300px;
  background: var(--dc-bg);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  font-family: var(--dc-font);
}
.dc-lo-screen__bar {
  position: relative;
  display: flex; align-items: center;
  min-height: 52px;
  padding: var(--dc-3) var(--dc-4);
  padding-top: calc(var(--dc-safe-top) + var(--dc-3));
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
}
.dc-lo-screen__title { font-size: 16px; font-weight: 700; color: var(--dc-text); }
.dc-lo-screen__body {
  display: flex; flex-direction: column; gap: var(--dc-4);
  padding: var(--dc-5) var(--dc-4);
}
.dc-lo-skel {
  display: block; height: 14px;
  border-radius: var(--dc-r-xs);
  background: var(--dc-sunken);
}
.dc-lo-skel--short { width: 58%; }
.dc-lo {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--dc-6);
  padding-bottom: calc(var(--dc-safe-bottom) + var(--dc-6));
  background: var(--dc-overlay);
}
.dc-lo__box {
  display: flex; flex-direction: column; align-items: center; gap: var(--dc-3);
  min-width: 180px; max-width: 260px;
  padding: var(--dc-5) var(--dc-5) var(--dc-4);
  background: var(--dc-surface);
  border-radius: var(--dc-r-lg);
  box-shadow: var(--dc-sh-3);
  text-align: center;
}
.dc-lo__spin {
  width: 32px; height: 32px;
  border: 3px solid var(--dc-line);
  border-top-color: var(--dc-brand);
  border-radius: var(--dc-r-full);
  animation: dc-lo-spin .8s linear infinite;
}
@keyframes dc-lo-spin { to { transform: rotate(360deg); } }
.dc-lo__msg { font-size: 14px; line-height: 1.6; color: var(--dc-text); }
.dc-lo__cancel {
  min-width: 44px; min-height: 44px; padding: 0 var(--dc-4);
  border: 1px solid var(--dc-line-field);
  border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: inherit; font-size: 14px; font-weight: 700;
  transition: background var(--dc-fast);
}
.dc-lo__cancel:active { background: var(--dc-sunken); }
.dc-lo-top {
  position: absolute; left: 0; right: 0; bottom: -1px;
  overflow: hidden;
  height: 3px;
  background: var(--dc-brand-soft);
}
.dc-lo-top__fill {
  display: block; width: 40%; height: 100%;
  background: var(--dc-brand);
  animation: dc-lo-slide 1.2s ease-in-out infinite;
}
@keyframes dc-lo-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

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

फर्काउन नमिल्ने काम (भुक्तानी, पेस, मेटाउने) मा मात्र पर्दा छोप्नु — साधारण लोडिङमा माथिको पट्टी वा खाका राख्नु
के भइरहेको छ पाठमा लेख्नु; घुम्ने चिह्नले मात्र कुन काम अडकियो भन्न सक्दैन
दस सेकेन्डभन्दा लामो हुन सक्छ भने कति बाँकी छ देखाउनु वा रोक्ने बाटो दिनु

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

छोपिएको भागमा फोकस जान नदिनु र role=status ले जानकारी दिनु
चाल घटाइएको यन्त्रमा घुमाइ रोकिन सक्छ, त्यसैले अवस्था पाठमा पनि राख्नु

अर्को

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

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

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

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