Progress Bar — ELF Design System 2.0

Progress Bar

Visually represents the completion status of a task, process, or loading operation. A linear indicator used for file uploads, form completion, or process tracking.

Documentation

Code

Status & Change logs

4.15.26

None-breaking

Added Progress Bar component to the ELF Design System with determinate and indeterminate mode support.

Added progress prop accepting 0–100 integer values in any granularity.

Added label boolean to show or hide the percentage text alongside the bar.

Added labelType prop with two positions: right (inline) and bottom (below the track, right-aligned).

Added Track background color #f6f6f6 and fill color #006cb6 mapped to ELF brand tokens.

Added ELF Flutter component ElfProgressBar with complete prop API.

Added Raw Flutter code generation using LinearProgressIndicator.

Overview

The Progress Bar communicates how far along a task or process is. It consists of a fixed-height track and a filled indicator that grows from left to right. The label can be shown inline to the right or positioned below the track aligned to the right edge. An indeterminate mode is available when progress cannot be quantified.

Props progress · label · labelType

Label positions Right · Bottom · None

Range 0% → 100%

Track height 8px

Anatomy

1 2 3

60%

1 Track (background)

2 Fill (progress indicator)

3 Label (optional)

Progress Values

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Label Positions

60%

Right

Label sits inline to the right. Best for rows where vertical space is limited.

60%

Bottom

Label sits below the track, aligned to the right. Use in full-width contexts.

None

No label. Use when percentage is communicated elsewhere in the UI.

Indeterminate

Animated fill. Use when the duration or completion % is unknown.

Usage Guidelines

Use determinate progress when you know the total and current step count, such as a file upload or form wizard.

Use indeterminate mode for operations of unknown length, like API fetches or background tasks.

Pair the label with context text (e.g. "Uploading…") so users understand what is progressing.

Use the Bottom label in full-width layouts where an inline label would create awkward wrapping.

Don't

Don't show a progress bar stuck at 0% or 100% for extended periods — update the surrounding UI state accordingly.

Don't use progress bars for binary on/off states — use a Checkbox or Toggle instead.

Don't nest multiple progress bars inside each other — use a single bar per distinct operation.

Don't manually animate the fill width with arbitrary delays — tie it to real progress events.

Variants

Preview