Progress Bar

Visualizes progress toward a maximum value.

ProgressBar web component

Visualizes progress toward a maximum value.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Basic progress

Show progress with or without a title.

<noora-progress-bar value="75" max="100"></noora-progress-bar>
<noora-progress-bar value="150" max="200" title="Storage Used:"></noora-progress-bar>

Progress levels

Compare empty, quarter, half, three-quarter, and complete states.

<noora-progress-bar value="0" max="100" title="Not started"></noora-progress-bar>
<noora-progress-bar value="25" max="100" title="25% Complete"></noora-progress-bar>
<noora-progress-bar value="50" max="100" title="Halfway there"></noora-progress-bar>
<noora-progress-bar value="75" max="100" title="Almost done"></noora-progress-bar>
<noora-progress-bar value="100" max="100" title="Complete!"></noora-progress-bar>

Different scales

Use any numeric range that suits the measured quantity.

<noora-progress-bar value="3" max="5" title="Steps completed:"></noora-progress-bar>
<noora-progress-bar value="750" max="1000" title="Points earned:"></noora-progress-bar>
<noora-progress-bar value="847" max="1024" title="Download progress (MB):"></noora-progress-bar>

Edge cases

Show overflowing, very small, and long-title progress values.

<noora-progress-bar value="120" max="100" title="Exceeded goal:"></noora-progress-bar>
<noora-progress-bar value="1" max="1000" title="Just started:"></noora-progress-bar>
<noora-progress-bar value="42" max="100" title="Very Long Progress Bar Title That Might Wrap:"></noora-progress-bar>

Attributes

Attribute	Type or allowed values	Default	Description
`value`	number	`0`	Sets the current value.
`max`	number	`100`	Sets the maximum value.
`title`	string	`None`	Sets the optional title.

Slots

Name	Description
`description`	Supporting content below the bar.

Styling parts

Name	Description
`progress`	The progress container.
`track`	The complete track.
`value`	The filled track.