ស្រទាប់កំពុងផ្ទុក

ប្រើសម្រាប់កិច្ចការដែលមិនត្រូវចុចពីរដង ដូចការបង់ប្រាក់ ឬការដាក់ស្នើ ដែលការបិទអេក្រង់ជាការប្រសើរ។

មើលជាមុនផ្ទាល់

ប្រភព

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
ឧបករណ៍ដែលបន្ថយចលនាអាចបញ្ឈប់ការបង្វិល ដូច្នេះត្រូវមានអត្ថបទប្រាប់ស្ថានភាពផង

បន្ទាប់

របារសារខ្លី មតិត្រឡប់ កម្មវិធី

អូសដើម្បីផ្ទុកឡើងវិញ មតិត្រឡប់ កម្មវិធី

រង្វង់វឌ្ឍនភាព មតិត្រឡប់ កម្មវិធី វេប

ចំណុចជំហាន មតិត្រឡប់ កម្មវិធី