Components
Progress Ring
설계 대비 실제 준수율처럼 하나의 핵심 비율을 원형 링 + 세부 항목 리스트로 함께 보여줍니다. 우측 리스트의 합이 링의 값과 일치해야 합니다.
78%설계 준수
설계대로 완결68%
불만→이관 이탈22%
신규 구간4%
위 미리보기는 이미지가 아니라 실제 코드입니다 — 눌러 보고, 올려 보세요.
코드 보기
<div class="tn-ring">
<svg viewBox="0 0 108 108">...</svg>
<div class="num"><b>78%</b><s>설계 준수</s></div>
</div>
<div class="tn-ring-list">
<div class="tn-ring-row">아이콘 설계대로 완결<span class="pc">68%</span></div>
</div>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 링 단독 | 중심 값만 필요할 때 리스트 생략 | 45% |
| 세부 블록 바 | 20칸 세그먼트로 정밀도 보강 | |
| 경고 톤 | 임계 미달 시 링 색을 err로 전환 | 31% |
Guidelines
✓ Do
- 링 값 = 리스트 항목 비율의 합(100%) 검증
- 중심 값은 1.5rem·700, 보조 레이블은 s 태그
- 세부 블록 바로 20칸 단위 정밀도 보강 가능
✕ Don't
- 링 두께를 항목 수에 따라 바꾸지 않는다 (10px 고정)
- 3개 초과 항목은 리스트가 아닌 표로 전환
- 링 안에 아이콘·이미지 삽입 금지 — 숫자만
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
크기 | 108×108 (인라인 64~88px) | |
호 두께 | 10px stroke | |
stroke-dasharray | 289 (2πr, r=46) | |
중심 값 | 1.5rem · 700 |
비교
Insight 'Conformance' 실물에서 추출. Progress Ring vs Donut — 하나의 달성률·준수율은 Progress Ring, 여러 항목의 구성비는 Donut.