Progress Bar

A progress bar lets the user know that something is processing or progressing.

Anatomy

1. Track - a fixed width track for the progress indicator to travel along.
2. Progress indicator - an animated bar that conveys processing or progress toward completion.
3. Label - a description of what is progressing.

Usage

• Use a progress bar when there will be a delay of more than 1 second in loading or completing an action.
• A progress bar can be used both when the amount of time is determined and when it is indeterminate.
• If an application is loading, then the progress bar will display and the user will be blocked from interacting with the application until it is loaded.
• You can also use a spinner.

Do

• Do use only 1 progress bar on the screen at a time.
• Do start the progressive animation slower and allow it to move faster as it approaches the end. It is always a better user experience to exceed customer expectations.

Don't

• Don't use a progress bar for an immediate process (less than 1 second). Nothing should display in that situation.
• Don't use a progress bar if most of the application can load very quickly except for some text or data elements. Use a skeleton instead.
• Don't use a progress bar inside of a button. Use a spinner or loading state instead.

Indeterminate vs. Determinate

The progress bar is in "indeterminate" mode if it does not have a set value. This conveys to users that something is processing without communicating how close it is to being complete.

Loading...

When a progress bar does have a set value, it is in "determinate" mode. This gives the user an estimate of the percentage of time remaining until completion.

Downloading...

React API

We expose one component for the progress bar API, the ProgressBar.

Related concepts

• HTML element: <progress>
• DOM interface: HTMLProgressElement
• ARIA role: progressbar

ProgressBar

The ProgressBar component extends the React.ComponentPropsWithoutRef<'div'> interface.

import { ProgressBar } from '@wwnds/react';

Live Editor

/* set progress to a value between 0 and 1 to make determinate */
<ProgressBar label="Loading..." progress={undefined} />

Result

Loading...

Name	Description	Type
size	The hight of the progress bar. This sets a className of nds-progressbar--${size}, which can be used to change the size. @wwnds/core's default stylings will correspond to: small 4px undefined 8px large 16px	"small" | "large"
buffer	A buffered value between 0 and 1.	number
reversed	Indicates that the progress bar should grow right to left.	boolean
progress	Indicates how much of the task has been completed.	number
max	Describes how much work is required to complete the progress. If defined, it must be greater than 0 and be a valid floating point number. The default is 1.	number
label (required)	The progress bar's label describes what is progressing. It is required and recommended to be visible.	string
hideLabel	Indicates that the label should not be visible. Note that the label will still be accessible to assistive technologies even when it is not visible.	boolean
baseName	The base class name according to BEM conventions.	string
labelClass	The className for the progress indicator's label. Default is ${baseName}__label.	string