Skip to content
DOL Studio

Progress

Design: Stable Code: Coded feedbackprogress 5 Figma sets 3 standalone Progress / Bar

Live preview

Default tone (info-blue)

Figma default. 4 progress points — 10 / 40 / 70 / 100. At 100%, auto-renders trailing ✓ badge.
Upload 10%10%
Upload 40%40%
Upload 70%70%
Upload complete (auto ✓ badge)100%

Error state

`error` prop adds trailing × badge with danger tint — for failed uploads / sync errors / aborted operations.
Upload failed45%

Opt-in tones

3 alternate tones — brand (primary product progress), success (audit/quality coverage), warning (disk/quota usage).
Lesson progress62%
Audit coverage95%
Disk usage88%

Sizes

3 sizes — sm (compact dashboard) / md (default) / lg (hero progress bars).
50%
50%
50%

Indeterminate

`indeterminate` prop = sliding animation when total progress is unknown (e.g., initial sync, async fetch).
Syncing tokens…

Import & files

Import
import { Progress } from "@dol/ui/progress";
Source file
packages/@dol/ui/src/progress/Progress.tsx

Figma source

Figma source 5 sets
Page
Progress
Sets
5 + 3 standalone
Primary set
Progress / Bar · 48 variants Open in Figma →
Showing: Progress / Bar
4 other sets
  • Progress / Circular w text 14 variants Figma →
  • Progress / Ring 4 variants Figma →
  • Progress bar w auto layout 3 variants Figma →
  • Progress bar w pattern 4 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Progress
Slug: `progress`
Domain: general · Category: feedback
Design: stable · Code: coded


## Description
Progress bar + chart line patterns. Use linear progress for tasks, dotted patterns for charts.


## Import
```ts
import { Progress } from "@dol/ui/progress";
```
Source: `packages/@dol/ui/src/progress/Progress.tsx`


## Figma source
Page: Progress
Sets: 5
Primary: Progress / Bar
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=3027-50184

Related

  • Notice

    Alert

    Coded

  • Skeleton

    Coded
  • No items
    Add your first entry.

    Empty state

    Coded
  • Saved
    Changes committed.

    Toast

    Coded
    1. 1
    2. 2
      2
    3. 3
      3

    Steps

    Coded
  • R
    bug-report

    Report

    Design only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).