FDIC Design System

Appearance

Progress & Meter ​

Progress bars and meters visualize completion and measurement. Progress tracks how far a task has advanced toward completion; meter displays a value within a known range.

Prose sub-topic

Use progress for tasks that have a beginning and end, and meter for static measurements within a defined range, when authored technical or reporting content inside Prose needs a native visual indicator.

When to use ​

Progress ​

A task is underway and the reader benefits from knowing how far along it is — uploading documents, processing submissions, completing a multi-step form.

Indeterminate progress ​

A task is running but the duration is unknown — waiting for a server response, background processing.

Meter ​

Displaying a measurement within a known range — a bank's capital ratio against regulatory minimums, storage capacity, compliance score.

Examples ​

Overview — determinate progress, indeterminate progress, and meter in one representative example. Open Storybook for isolated controls. View in Storybook →
  • Determinate progress communicates known completion toward a finish line.
  • Indeterminate progress is honest about work in flight when you cannot predict duration.
  • Meter communicates a current value within a range rather than progress toward completion.

Best practices ​

Do

Always pair the bar with a label and text value

Always pair a progress bar or meter with a visible label and text value — "75 of 100 items processed (75%)."

Don't

Don't show a bar without context

A bare bar is ambiguous — users cannot tell what is being measured, what the scale is, or how far along the task is without a label and value.

Do

Use meter for static measurements

Use meter (not progress) for static measurements — compliance scores, capital ratios, capacity levels.

Don't

Don't use progress for values that aren't progressing

Progress implies a task moving toward completion. A static measurement like a compliance score should use meter instead.

Do

Use indeterminate progress for unknown durations

Use indeterminate progress when the task is running but the duration is unknown.

Don't

Don't fake a percentage

A fabricated number erodes trust. An honest indeterminate bar tells the user the task is running without making promises about when it will finish.

Do

Use meter ranges to communicate status

Use meter's optimum, suboptimum, and sub-sub-optimum ranges to color-code whether a value is acceptable (green), concerning (yellow), or critical (red).

Don't

Don't rely on color alone

Color-blind users and those in high-contrast mode cannot distinguish green from red. The numeric value and label text must convey the same status information the color does.

Content guidelines ​

Write labels that describe what is being measured.
Do

"Call Reports submitted — 847 of 1,200 (71%)"

Don't

"Progress: 71%"

Include both the current value and the total or range in the text.
Do

"Tier 1 capital ratio: 12.4% (well-capitalized minimum: 6%)"

Don't

"Ratio: 12.4%"

Accessibility ​

  • Every progress bar and meter needs a visible label. The label connects the visual bar to its meaning for all users.
  • The text value provides the information screen readers announce. The text value (e.g., "75 of 100") provides the information screen readers announce. Don't rely on the visual bar alone.
  • Indeterminate progress respects reduced motion. Indeterminate progress bars use animated stripes to show activity. Users who prefer reduced motion see a static striped pattern instead.
  • Meter color changes must be paired with numeric values. Meter color changes (green/yellow/red) must be paired with the numeric value — color alone does not convey whether a value is good or bad.

Design specs ​

Figma design spec

Connect a Figma file to see design specifications

Progress and meter anatomy — label, bar, value text, and color states
  • Progress and meter are two distinct elements documented on this page. See Callouts for status messages that need visual emphasis beyond a bar chart.