ProgressBar
원본: projects/skill-lens/design/components/ProgressBar/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
누적 막대, 범례는 항상 단어 병기
완료율과 비율을 보여 주는 8px 막대입니다. 원본은 8판 .bar.
쓰는 곳
진단 참여 현황, 비율 비교.
구성(화면이 넘겨줄 것)
구간별 비율과 라벨.
규칙
- 높이 8, 둥글기 4, 빈 곳
divider. 구간은 보라(--brand), 산호(--coral), 라임(--lime), 상태색. - 범례에 단어와 숫자를 함께 씁니다("완료 1,203명").
접근성
role="progressbar",aria-valuenow.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Feedback" height=210 subtitle="누적 막대, 범례는 항상 단어 병기" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.cap{font:500 12px/16px var(--font-sans);color:var(--ink-muted)}.card{padding:var(--space-4);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}</style>
<div class="sl stack">
<div class="card" style="max-width:360px"><div class="cap" style="margin-bottom:var(--space-2)">업로드</div>
<div class="sl-bar" role="progressbar" aria-valuenow="96" aria-valuemin="0" aria-valuemax="100" aria-label="업로드 진행"><div class="sl-bar__seg--success" style="--w:84%;width:84%"></div><div class="sl-bar__seg--warning" style="--w:12%;width:12%"></div></div>
<div class="sl-bar-legend"><span><i class="sl-dot sl-dot--success"></i>완료 1,203명</span><span><i class="sl-dot sl-dot--warning"></i>진행 중 45명</span></div></div>
<div style="max-width:360px"><div class="sl-bar"><div class="sl-bar__seg--brand" style="--w:42%;width:42%"></div></div></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.