Skip to main content

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.

AttributeTypeDefaultDescription
progressNumber0The current position, as a number, that the bar has progressed to. Range: Between 0 and 100.
alignmentStringunsetThe position of the progressbar's label. Possible values: 'left', 'right', 'center'.
typeStringunsetThe type of the bar. Possible values: 'static'; 'loading'.
labelStringunsetThe 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>