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

សម្រាប់បញ្ជីដែលផ្លាស់ប្តូរតាមពេល ដែលការអូសចុះជាវិធីលឿនបំផុតដើម្បីទាញថ្មី។

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

ប្រភព

HTML CSS

<div class="dc-pull" aria-busy="true">
  <div class="dc-pull__head">
    <span class="dc-pull__spin" aria-hidden="true"></span>
    <span class="dc-pull__hint" role="status">새로 불러오는 중…</span>
  </div>
  <ul class="dc-pull__list">
    <li class="dc-pull__item">
      <span class="dc-pull__title">3월 18일 출근</span>
      <span class="dc-pull__sub">A현장 · 8시간 · 140,000원</span>
    </li>
    <li class="dc-pull__item">
      <span class="dc-pull__title">3월 17일 출근</span>
      <span class="dc-pull__sub">A현장 · 8시간 · 140,000원</span>
    </li>
    <li class="dc-pull__item">
      <span class="dc-pull__title">3월 15일 출근</span>
      <span class="dc-pull__sub">B현장 · 6시간 · 105,000원</span>
    </li>
  </ul>
</div>

.dc-pull {
  overflow: hidden;
  background: var(--dc-bg);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  font-family: var(--dc-font);
}
.dc-pull__head {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--dc-2);
  min-height: 76px; padding: var(--dc-3);
  background: var(--dc-sunken);
}
.dc-pull__spin {
  width: 26px; height: 26px;
  border: 3px solid var(--dc-line-bold);
  border-top-color: var(--dc-brand);
  border-radius: var(--dc-r-full);
  animation: dc-pull-spin .8s linear infinite;
}
@keyframes dc-pull-spin { to { transform: rotate(360deg); } }
.dc-pull__arrow {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--dc-r-full);
  border: 1px solid var(--dc-line-bold);
  color: var(--dc-text-sub); font-size: 13px; line-height: 1;
}
.dc-pull__check {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--dc-r-full);
  background: var(--dc-ok); color: var(--dc-text-on);
  font-size: 14px; font-weight: 700; line-height: 1;
}
.dc-pull__hint { font-size: 12px; color: var(--dc-text-sub); }
.dc-pull__list { background: var(--dc-surface); }
.dc-pull__item {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 64px; padding: var(--dc-3) var(--dc-4);
  justify-content: center;
  border-top: 1px solid var(--dc-line);
}
.dc-pull__title { font-size: 15px; font-weight: 700; color: var(--dc-text); }
.dc-pull__sub { font-size: 13px; color: var(--dc-text-sub); }

របៀបប្រើ

ដាក់តែលើបញ្ជីដែលប្រែប្រួលតាមពេល (វត្តមាន សារជូនដំណឹង ការបញ្ជាទិញ)
បង្ហាញដំណាក់កាលទាំងបី ឱ្យខុសគ្នា៖ កំពុងអូស កំពុងផ្ទុក រួចរាល់
រក្សាចលនានេះ ទោះបីមានប៊ូតុងផ្ទុកឡើងវិញក៏ដោយ

ចំណុចត្រូវប្រុងប្រយ័ត្ន

ចលនានេះមើលមិនឃើញ ដូច្នេះត្រូវមានអត្ថបទប្រាប់ស្ថានភាពជាប់ជាមួយ
ប្រើ aria-busy និង role=status ពេលកំពុងផ្ទុក

បន្ទាប់

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

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

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

អេក្រង់ទទេ មតិត្រឡប់ កម្មវិធី