Skip to main content

Progress Bar


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.


<script src=""></script>


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



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


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


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


All attributes in this API are optional.

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.


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>