Linear Progress

Linear progress indicators display progress by animating along a horizontal track, for both determinate and indeterminate waits.

Usage

forge-linear-progress communicates that a component is loading through determinate, progress, buffer, and theme. Reach for it at the bottom of a field, dropdown, or expansion panel; for a spinner that fits inside a smaller component like a button, list item, or card, use a circular progress indicator instead.

Rules

Only show a progress indicator when the expected wait is more than a second.

Use determinate progress whenever the completion rate is actually known.

Pick one indicator style — linear or circular — for a given action, and use it consistently everywhere that action appears.

Don't

Don't mix linear and circular indicators for the same kind of activity in different parts of the app.

Don't fake a determinate value — use indeterminate when the actual completion rate is unknown.

Don't use a linear progress indicator for a full-page load — use a busy indicator instead.

Basic usage

An indeterminate bar is the default — it animates continuously with no specific progress value.

An indeterminate linear progress indicator.

<forge-linear-progress aria-label="Linear progress demo">
</forge-linear-progress>

Determinate

Set determinate and progress (a value from 0 to 1) when the actual completion percentage is known.

A determinate indicator showing a specific completion percentage.

<forge-linear-progress determinate progress="0.5" aria-label="Linear progress demo">
</forge-linear-progress>

Buffer

Set buffer (a value from 0 to 1) alongside progress to show a second, lighter fill for content that’s ready but not yet the active position — the pattern used by media scrubbers.

A buffered indicator shows progress and a secondary buffered amount together.

<forge-linear-progress determinate progress="0.33" buffer="0.66" aria-label="Linear progress buffer demo">
</forge-linear-progress>

Theme

Set theme to match the indicator to its surrounding context.

A themed linear progress indicator.

<forge-linear-progress theme="success" aria-label="Loading">
</forge-linear-progress>

Linear progress indicators display progress by animating along a linear track in a horizontal direction. They can be used to show determinate or indeterminate progress.

import "@tylertech/forge/linear-progress";

Properties

Property	Attribute	Type	Default	Description
`determinate`	`determinate`	`boolean`	`false`	Controls the determinate state.
`progress`	`progress`	`number`	`0`	Controls the progress while in a determinate state. Accepts values from `0` to `1`.
`buffer`	`buffer`	`number`	`1`	Controls the buffer progress while in a determinate state. Accepts values from `0` to `1`.
`theme`	`theme`	`string`	`primary`	Sets the theme.

CSS Parts

Name	Description
`::part(progressbar)`	Styles the progress bar container element

CSS Custom Properties

Name	Description
`--forge-linear-progress-height`	The height of the element.
`--forge-linear-progress-track-color`	The background color of the indicator.
`--forge-linear-progress-track-shape`	The shape of the indicator.
`--forge-linear-progress-indicator-color`	The color of the indicator.
`--forge-linear-progress-indicator-height`	The height of the indicator only.
`--forge-linear-progress-determinate-duration`	The duration of the determinate animation.
`--forge-linear-progress-indeterminate-duration`	The duration of the indeterminate animation.
`--forge-linear-progress-determinate-easing`	The easing function to use for the determinate animation.
`--forge-linear-progress-theme-transition-duration`	The duration of the theme transition.
`--forge-linear-progress-theme-transition-timing`	The easing function to use for the theme transition.

Labeling

Give the progress bar a meaningful aria-label so screen reader users know what’s loading — without one, a purely visual indicator conveys nothing to assistive technology.