Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Langkah progres

Untuk pekerjaan bertahap: sudah sampai mana, dan tinggal berapa tahap lagi.

Tampilan data

Pratinjau langsung

Sumber

<div class="dc-prog">
  <div class="dc-prog__head">
    <span class="dc-prog__label">서류 검토 중</span>
    <span class="dc-prog__count">4단계 중 2단계</span>
  </div>
  <div class="dc-prog__bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="지원 진행률">
    <span class="dc-prog__fill" style="width:50%"></span>
  </div>
  <ol class="dc-prog__steps">
    <li class="dc-prog__step is-done">신청서 작성<span class="dc-sr"> — 끝남</span></li>
    <li class="dc-prog__step is-now">서류 검토<span class="dc-sr"> — 지금 단계</span></li>
    <li class="dc-prog__step">면접</li>
    <li class="dc-prog__step">결과 통보</li>
  </ol>
</div>
.dc-prog { display:flex; flex-direction:column; gap:var(--dc-3); font-family:var(--dc-font); }
.dc-prog__head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--dc-2); }
.dc-prog__label { font-size:15px; font-weight:600; color:var(--dc-text); }
.dc-prog__count { font-size:13px; color:var(--dc-text-sub); font-variant-numeric:tabular-nums; }
.dc-prog__bar { height:8px; border-radius:var(--dc-r-full); background:var(--dc-sunken); overflow:hidden; }
.dc-prog__fill { display:block; height:100%; border-radius:var(--dc-r-full); background:var(--dc-brand); transition:width var(--dc-slow); }
.dc-prog__steps { display:flex; flex-wrap:wrap; gap:var(--dc-2) var(--dc-4); margin:0; padding:0; list-style:none; }
.dc-prog__step { font-size:13px; color:var(--dc-text-mute); }
.dc-prog__step.is-done { color:var(--dc-text-sub); }
.dc-prog__step.is-now { color:var(--dc-brand-text); font-weight:700; }
.dc-prog__row { display:flex; align-items:center; gap:var(--dc-4); font-family:var(--dc-font); }
.dc-prog__ring { position:relative; display:flex; flex:0 0 auto; align-items:center; justify-content:center; width:92px; height:92px; border-radius:var(--dc-r-full); background:conic-gradient(var(--dc-brand) 0 50%, var(--dc-sunken) 50% 100%); }
.dc-prog__ring::after { content:""; position:absolute; inset:11px; border-radius:var(--dc-r-full); background:var(--dc-bg); }
.dc-prog__ring-num { position:relative; font-size:18px; font-weight:700; color:var(--dc-text); font-variant-numeric:tabular-nums; }

Cara memakainya

  • Tulis sisanya dengan angka — langkah 2 dari 4
  • Nama tahap berupa kata benda singkat; di layar sempit cukup tahap saat ini
  • Tahap yang bisa dikunjungi ulang jadikan tautan; kalau hanya bacaan jangan bisa ditekan

Hal yang perlu diwaspadai

  • Bilah tanpa angka tidak memberi tahu sisa pekerjaannya
  • Role progressbar perlu aria-valuenow dan sebuah label

Berikutnya