HTML- Progress Bar

Example:

Next

 

 

Tips on how to use this code:

1. This can be added to more than one page with different percentage. To change the percentage view, change "width: 50%" to the desired percentage.

2. To navigate using the button, fill the navigation URl in the code. "href="URL">Next".

Code

<a id="animateProgress" href="URL" class="Button Button--primary">Next</a>
<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" style="width: 100%;">
    <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 50%;"></div>
</div>

 

Back