Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Lớp phủ đang tải

Dùng cho việc không được bấm hai lần như thanh toán hay gửi hồ sơ, khi chặn màn hình là tử tế hơn.

Phản hồi

Xem trước trực tiếp

Nguồn

<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%); }
}

Cách dùng

  • Chỉ chặn màn hình với việc không thể hoàn tác (thanh toán, gửi, xoá) — tải thường thì dùng thanh trên hoặc khung chờ
  • Ghi rõ đang làm gì; chỉ vòng xoay thì không biết cái gì bị treo
  • Nếu có thể lâu hơn mười giây, hãy cho biết còn lại bao nhiêu hoặc cho đường thoát

Điểm cần lưu ý

  • Giữ tiêu điểm ra khỏi phần bị che và thông báo bằng role=status
  • Thiết bị giảm chuyển động có thể làm vòng xoay đứng, nên vẫn cần chữ mô tả

Tiếp theo