Progress

Linear progress using role="progressbar" with value / max, or indeterminate for a loading animation. Complete Initialization first, then use the CLI or copy the source below.

Preview

Live

Add Progress via CLI

After init and layout theme wiring (see MY_UI_THEME_LAYOUT.md in your project), add the Progress component:

npm exec -- my-ui add progress

Component source

<div class="ui-progress ui-progress--default" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45" aria-valuetext="45%">
  <div class="ui-progress__track" aria-hidden="true">
    <div class="ui-progress__fill" style="width:45%"></div>
  </div>
</div>