Progress

Progress bars for status and loading indicators. Includes declarative markup, size/color variants, and a small JS API.

Default

<div class="ms-progress" data-ms="progress">
  <div class="ms-progress__bar" data-value="60"></div>
</div>

Striped / Animated

<div class="ms-progress ms-progress--striped ms-progress--animated" data-ms="progress">
  <div class="ms-progress__bar" data-value="45"></div>
</div>

Sizes

Small — ms-progress--sm

Default

Large — ms-progress--lg

<div class="ms-progress ms-progress--sm" data-ms="progress">...</div>
<div class="ms-progress" data-ms="progress">...</div>
<div class="ms-progress ms-progress--lg" data-ms="progress">...</div>

Colors

Primary (default)

Success — ms-progress--success

Warning — ms-progress--warning

Error — ms-progress--error

<div class="ms-progress" data-ms="progress">...</div>
<div class="ms-progress ms-progress--success" data-ms="progress">...</div>
<div class="ms-progress ms-progress--warning" data-ms="progress">...</div>
<div class="ms-progress ms-progress--error" data-ms="progress">...</div>

Indeterminate

<div class="ms-progress is-indeterminate" data-ms="progress">
  <div class="ms-progress__bar"></div>
</div>

JS controlled

const api = document.getElementById('progressDemo').__msProgress;
api.increment(10);
api.decrement(10);
api.set(100);
api.startIndeterminate();
api.stopIndeterminate();

Events

The progress element fires custom events you can listen to.

const el = document.querySelector('.ms-progress');

el.addEventListener('ms:progress:change', e => {
  console.log('value:', e.detail.value);
});

el.addEventListener('ms:progress:complete', () => {
  console.log('complete!');
});