띠 · 진행 막대 한 줄(전체 대비 현재)

일정이나 목표 대비 지금 위치를 본문 아래에 한 줄로 둘 때. 왼쪽 문구 16자 이내, 오른쪽 문구 20자 이내. 값 바꾸는 법: .bar i 의 width = 현재 ÷ 전체 × 100%. .v=같은 값의 숫자. p.k=무엇의 진행인지, p.n=다음 점검 시점.

직접 제작. 프로젝트 현황 보고의 진행률 막대 표기를 참고.

<div class="dk dks dks-prog"><p class="k">전체 12주 중 <b>5주차</b></p><div class="bar"><i style="width:42%"></i></div><b class="v num">42%</b><p class="n">다음 점검: 6주차 중간 보고</p></div>

.dks-prog{border-top:1px solid var(--line2);padding-top:7px;min-height:44px;display:flex;align-items:center;gap:20px}
.dks-prog p{flex:none;margin:0;font-size:var(--f-sm);color:var(--ink2)}
.dks-prog .bar{flex:1;min-width:0;height:8px;border-radius:4px;background:var(--g1)}
.dks-prog .bar i{display:block;height:100%;border-radius:4px;background:var(--ac)}
.dks-prog .v{flex:none;font-size:var(--f-lg);font-weight:700;color:var(--ink)}
.dks-prog p.n{font-size:var(--f-cap);color:var(--mu);padding-left:20px;border-left:1px solid var(--line2)}