Progress Bar

Installation

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN

<script src="https://unpkg.com/@pearson-ux/progress-bar"></script>

NPM

npm i @pearson-ux/progress-bar --save

Demo

Standard

   <pearson-progress-bar type="static" progress="50" label="50"></pearson-progress-bar>

Loading

<pearson-progress-bar  type="loading" progress="50"></pearson-progress-bar>

Structure

To add a progress bar, just add the markup in your app where you want it displayed.

API

All attributes in this API are optional.

Attribute	Type	Default	Description
progress	Number	0	The current position, as a number, that the bar has progressed to. Range: Between 0 and 100.
alignment	String	unset	The position of the progressbar's label. Possible values: 'left', 'right', 'center'.
type	String	unset	The type of the bar. Possible values: 'static'; 'loading'.
label	String	unset	The description of what the bar is loading. Varies based on the needs of your app. Can only be set on static progressbars.

Events

There are no event that get emitted.

HTML Markup

Do you want to use your own JS to make a custom progress bar? No problem, use the markup below along with CSS to customize your progress bar.

Important note: You can follow the UXF guidelines to view the suggested functionality of the progress bar.

Here are some basic practices to make sure the progress bar you build is accessible.

<div class="gr-progress-bar standard">
    <p class="fullbar" id="label">20%</p>
    <div role="progressbar" aria-valuenow="20" aria-valuemax="100" aria-valuemin="0" style="width:20%"></div>
</div>