Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Progress steps

For a job split into stages: how far it has come, and how many stages are still left.

Data display

Live preview

Source

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

How to use it

  • Spell the remainder out in numbers — step 2 of 4
  • Keep stage names short nouns; on a narrow screen keep only the current one
  • If a stage can be revisited make it a link; if it is read-only do not make it pressable

Watch out for

  • A bar with no number tells nobody how much is left
  • A progressbar role needs aria-valuenow and a label alongside it

Next