Progress Bar

Components > User Interaction > Progress Bar

Use this component to...

Show the progress of a determinate long-running process

See this component in action...

Test out this component in a hosted version of the sample app

Overview

A progress bar allows you to visually communicate how far along a determinate long-running process is. A determinate process is one where the application knows exactly how far along it is at in the process.

For example, say your application is running a process that has a finite number of known, defined steps:

The progress bar starts out showing 0% completion.
As each step in the process completes, the progress bar’s progress increases to indicate that further progress has been made.
When the process has completed, the progress bar shows 100% completion.

Using a progress bar helps give the user confidence that a long-running process is still running and hasn’t locked up.

The default progress bar displays a colored bar overlaid against a grayscale background. The colored foreground visually illustrates the current progress of the process, while the background represents the total amount of work to do.

What about indeterminate processes?

For indeterminate processes – where the app does not know how far along the process is at any point – use the busy indicator component instead.

Asynchronous service calls are indeterminate, since your app has no idea when the service call will complete.

Default progress bar at 75% progress

You can display a label within the progress bar. We typically display a value that identifies the progress, either as a number or a percentage. The label is centered within the colored foreground.

Progress bar with percentage message, at 75% progress

You can also use a percentage circle as a progress bar. This component displays the percentage progress as a circle rather than a horizontal bar.

Using a percentage circle to display progress as a percentage

Development

Web component development

Component reference

rui-progress-bar

Module: rui-progress-bar - Package: @jkhy/responsive-ui-wc

Visually indicates the progress of a determinate, long-running process

Name	Type	Default	Description
minValue	number	0	Minimum value for the progress bar.
maxValue	number	100	Maximum value for the progress bar.
value	number	0	Current value for the progress bar. You’ll typically bind this to a numeric backing value in TypeScript. As you update the value in TypeScript, the progress bar updates to reflect the new value.
displayLabel	boolean	true	Specifies whether to display the percentage value as text centered in the progress bar.

Implementation

Begin by importing the rui-progress-bar module into your application.

Import the module

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-progress-bar/rui-progress-bar-imports';

Use rui-progress-bar to implement a progress bar. Set minValue and maxValue to define the range, then bind value to a backing value in your TypeScript. Update the backing value in your Typescript, and the progress bar updates to reflect the new value. A label showing the percentage value displays by default; set displayLabel to false to hide that.

Progress bar example

<rui-progress-bar minValue="0" maxValue="100" [value]="progressValue" [displayLabel]="true"></rui-progress-bar>

Angular wrapper development

Wrapper reference

jha-progress-bar

Module: JhaProgressBarModule - Package: @jkhy/responsive-ui-angular

Visually indicates the progress of a determinate, long-running process

Name	Type	Default	Description
jhaMinValue	number	0	Minimum value for the progress bar.
jhaMaxValue	number	100	Maximum value for the progress bar.
jhaValue	number	0	Current value for the progress bar. You’ll typically bind this to a numeric backing value in TypeScript. As you update the value in TypeScript, the progress bar updates to reflect the new value.
jhaDisplayLabel	boolean	true	Specifies whether to display the percentage value as text centered in the progress bar.

Implementation

Begin by importing the JhaProgressBarModule module into your application.

Import the module

// import into app.module
import { JhaProgressBarModule } from '@jkhy/responsive-ui-angular/jha-progress-bar';

@NgModule({
    imports: [
        ...
        JhaProgressBarModule,
        ...
    ]
})

export class AppModule(){}

Use jha-progress-bar to implement a progress bar. Set jhaMinValue and jhaMaxValue to define the range, then bind jhaValue to a backing value in your TypeScript. Update the backing value in your Typescript, and the progress bar updates to reflect the new value. A label showing the percentage value displays by default; set jhaDisplayLabel to false to hide that.

Progress bar example

<jha-progress-bar jhaMinValue="0" jhaMaxValue="100" [jhaValue]="progressValue" [jhaDisplayLabel]="true"></jha-progress-bar>

Component playground

Design

Figma design

Figma design info

You can find this component in the Components - Progress Bar page in the Figma UI Kit.

Dev Component	Design Component Name
Progress bar track	RUI / Progress Bar / Track
Progress bar progress	RUI / Progress Bar / Progress
Percentage circle	RUI / Percentage Circle

You can display a progress bar using either a progress bar component or a percentage circle component.

To use a progress bar component:

First add a progress bar track to your artboard. Resize its width appropriately. Do not change its height.
Then add a progress bar progress component above the progress bar track. Position the thumb where you want it to appear horizontally.
Change the text in the progress bar progress component to an appropriate value. If you want to blank this out (displaying no text in the progress bar), set the text to a single space character.
Vertically center the thumb and the track.

See percentage circle for more information on the percentage circle.

Progress Bar design sample

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Progress Bar

Dev Component	Design Component Name
Progress bar track	JHA / Progress Bar / Track
Progress bar progress	JHA / Progress Bar / Progress
Percentage circle	JHA / Dashboard / Percentage Circle

You can display a progress bar using either a progress bar component or a percentage circle component.

To use a progress bar component:

First add a progress bar track to your artboard. Resize its width appropriately. Do not change its height.
Then add a progress bar progress component above the progress bar track. Position the thumb where you want it to appear horizontally.
Change the text in the progress bar progress component to an appropriate value. If you want to blank this out (displaying no text in the progress bar), set the text to a single space character.
Vertically center the thumb and the track.

See percentage circle for more information on the percentage circle.

Progress Bar design sample

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Wed Sep 25 2024