Progress Bar

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/progress-bar.css" />

Live

업로드 진행률 60%

값 조정

Colors

Primary

Label 60%

Secondary

Label 60%

Error

Label 60%

Sizes

Large (12px)

Label 60%

Medium (8px)

Label 60%

Small (4px)

Label 60%

Specs

요소	Height	Token	비고
Track — sm	4px	--radius-full	.progress-bar--sm
Track — md	8px	--radius-full	.progress-bar--md (기본값)
Track — lg	12px	--radius-full	.progress-bar--lg
Track 배경	—	--gray-200	다크모드: --gray-700
Fill — Primary	—	--green-400 → --green-500	linear-gradient(to right)
Fill — Secondary	—	#77abff → #3b82f6	linear-gradient(to right)
Fill — Error	—	#ff8282 → --red-500	linear-gradient(to right)
Label / Percent	—	--gray-500 / 12px / Regular	다크모드: --gray-400
Gap (label↔track)	—	--spacing-1 (4px)	—

Code

기본 (Primary · md · 60%)

<div class="progress-bar progress-bar--primary progress-bar--md">
  <div class="progress-bar__label">
    <span class="progress-bar__label-text">Label</span>
    <span class="progress-bar__percent">60%</span>
  </div>
  <div class="progress-bar__track"
    role="progressbar"
    aria-valuenow="60"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-label="진행률">
    <div class="progress-bar__fill" style="width: 60%"></div>
  </div>
</div>

<!-- 라벨 없이 트랙만 -->
<div class="progress-bar progress-bar--primary progress-bar--md">
  <div class="progress-bar__track"
    role="progressbar"
    aria-valuenow="40"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-label="진행률">
    <div class="progress-bar__fill" style="width: 40%"></div>
  </div>
</div>

Color 수정자

<!-- Primary (초록) -->
<div class="progress-bar progress-bar--primary progress-bar--md">...</div>

<!-- Secondary (파랑) -->
<div class="progress-bar progress-bar--secondary progress-bar--md">...</div>

<!-- Error (빨강) -->
<div class="progress-bar progress-bar--error progress-bar--md">...</div>

Size 수정자

<!-- Large (12px) -->
<div class="progress-bar progress-bar--primary progress-bar--lg">...</div>

<!-- Medium (8px, 기본값) -->
<div class="progress-bar progress-bar--primary progress-bar--md">...</div>

<!-- Small (4px) -->
<div class="progress-bar progress-bar--primary progress-bar--sm">...</div>

JavaScript — 자동 진행 애니메이션

const fill  = document.getElementById('progress-fill');
const pct   = document.getElementById('progress-pct');
const track = document.getElementById('progress-track');
const btn   = document.getElementById('auto-btn');

btn.addEventListener('click', () => {
  let current = 0;
  fill.style.width = '0%';
  pct.textContent  = '0%';
  track.setAttribute('aria-valuenow', 0);
  btn.disabled = true;
  btn.textContent = '진행 중...';

  const interval = setInterval(() => {
    current += 1;
    fill.style.width = current + '%';
    pct.textContent  = current + '%';
    track.setAttribute('aria-valuenow', current);

    if (current >= 100) {
      clearInterval(interval);
      btn.disabled = false;
      btn.textContent = '다시 시작';
    }
  }, 30); // 100단계 × 30ms = 3초
});

Classes

클래스	태그	설명
`.progress-bar`	루트	래퍼 — flex column, gap 4px
`.progress-bar__label`	요소	라벨 행 — 좌 텍스트 + 우 퍼센트
`.progress-bar__label-text`	요소	왼쪽 라벨 텍스트
`.progress-bar__percent`	요소	오른쪽 퍼센트 표시
`.progress-bar__track`	요소	회색 배경 트랙 — role="progressbar" 부여
`.progress-bar__fill`	요소	채움 바 — `style="width: N%"` 으로 진행률 제어
`.progress-bar--sm`	수정자	트랙 높이 4px
`.progress-bar--md`	수정자	트랙 높이 8px (기본값)
`.progress-bar--lg`	수정자	트랙 높이 12px
`.progress-bar--primary`	수정자	초록 그라디언트 (green-400 → green-500)
`.progress-bar--secondary`	수정자	파란 그라디언트 (#77abff → #3b82f6)
`.progress-bar--error`	수정자	빨간 그라디언트 (#ff8282 → red-500)