Design SystemComponentsProgress

Progress

Installation

import { Progress } from "@olab/components";

Overview

一條 8px 高的進度軌道，填滿比例代表完成度（0–100）。預設寬 200px，block 時撐滿父層。

填色預設是高對比色（dark 白、light 黑），軌道是淡底；沒有互動狀態。

Interactive Demo

ANIMATED — cycles 0–100 every 500ms

value = 0

State Matrix

VALUE — 0 / 25 / 50 / 75 / 100 (no interaction states)

0%
25%
50%
75%
100%

Examples

BLOCK — block=true fills the parent

CUSTOM FILL — classNames.range with a semantic token

Spec

PartValueSource class
Track高 8px，膠囊形h-2 rounded-full bg-tertiary
Track width200px；block 時撐滿w-50 / w-full
Fill高對比色（dark 白 / light 黑）bg-white rounded-2xl
Transition150ms ease-outtransition-normal

數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/progress.md。

Usage

Do

  • 顯示已知總量的進度：上傳、任務完成度、活動進度。
  • 旁邊配上數字或文字（60%、3 / 5），不要只靠長度。
  • 需要換填色時，透過 classNames.range 用語意 token（例如 bg-success-solid）。

Don't

  • 不要拿來表示機率或市場價格；市場頁的比例條有自己的元件與顏色規則。
  • 不知道要等多久時不要用進度條；改用 Spinner。
  • 不要寫死 hex 或 Tailwind 原始色（bg-red-500）當填色。