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.
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.
|Number||The current position, as a number, that the bar has progressed to. Range: Between 0 and 100.|
|String||unset||The position of the progressbar's label. Possible values: |
|String||unset||The type of the bar. Possible values: |
|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.|
There are no event that get emitted.
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.
<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>