WorkDS Docs Homepage

Progress

Displays a progress bar related to a task.

Props

color

rubygraygoldbronzebrownyellowamberorangetomatoredcrimsonpinkplumpurplevioletirisindigobluecyantealjadegreengrasslimemintsky

duration

`${number}s` | `${number}ms`

highContrast

boolean

radius

smallnonemediumlargefull

size

123

variant

softclassicsurface

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Usage

With controlled value

Use the value prop to provide a precise indication of the task progress.

With custom duration

Use the duration prop to indicate an approximate duration of an indeterminate task. Once the duration times out, the progress bar will start an indeterminate animation.

When an approximate duration can be estimated, the Progress component is still useful over Spinner, which doesn’t provide any visual cues towards the progress of the task.

Variants

Dashboard

1 variant found

Primary size 2 progress in Chat Headerdashboard
color=purplesize=2

Admin Portal

2 variants found

Progress in Syncing Page Contentadmin-portal

/p/:portalSessionId/directory-sync/:directoryId/verification/syncing

Progress in Syncing Page Contentadmin-portal

/p/:portalSessionId/directory-sync/:directoryId/verification/syncing

Context

PropTypeDefaultRequired
color
"ruby" | "gray" | "gold" | "bronze" | "brown" | "yellow" | "amber" | "orange" | "tomato" | "red" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | ... 8 more ...—no
duration
`${number}s` | `${number}ms`—no
highContrast
boolean—no
radius
"small" | "none" | "medium" | "large" | "full"—no
size
Responsive<"1" | "2" | "3">—no
variant
"soft" | "classic" | "surface"—no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

Usage

Used 5 times across 2 packages

Admin Portal
3
Dashboard
2

Variant Distribution

color

purple
100%

size

2
100%

Where it's used

4 files

/p/:portalSessionId/directory-sync/:directoryId/verification/syncing

packages/admin-portal/src/app/p/[portalSessionId]/directory-sync/[directoryId]/verification/syncing/syncing-page-content.tsx2
packages/dashboard/src/components/ai-chat/chat-header.tsx1
packages/dashboard/src/components/audit-logs/audit-logs-export-csv-modal/loading-state.tsx1

/p/:portalSessionId/audit-logs/audit-logs-table/audit-logs-export-csv-modal

packages/admin-portal/src/app/p/[portalSessionId]/audit-logs/(components)/audit-logs-table/audit-logs-export-csv-modal/audit-logs-export-csv-modal.tsx1