Line Progress Bar

A row of twenty rounded ticks that light up from the left to show progress toward a known total, such as an upload, a battery or a quota.

DesignReactVuePrompts

Copy

Uploading 4 files55%

13.2 MB of 24 MB

1

2

3

4

5

6

7

import { ProgressTrack } from '@orvain/react';
 
<ProgressTrack value={60} aria-label="Upload progress" />
<ProgressTrack value={85} tone="warning" aria-label="Storage used" />
 
// When a parent already announces the value
<ProgressTrack value={60} decorative />

Add an Orvain Line Progress Bar, half full in the success tone, under the title “Uploading 4 files” with the percentage on the right and “13.2 MB of 24 MB” below.

Orvain MCPIncluded with the library

When to use#

• For a task with a known total, when the value is worth showing.
• For a level against a limit: battery, storage, a daily goal.

When not to use

• Use a Spinner when the duration is unknown.
• Use a Circular Progress Bar in a square space.

Anatomy#

States#

Source#

Preview – final code pending

The Line Progress Bar is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is publishedGet notified when the source is published

Used in these blocks