Progress & activity usage

There are a couple of progress and activity indicator varieties. The "determinate", "indeterminate", "buffer", "circular" and "circular on floating button".


You can easily modify the determinate progress indicator by giving the .progressbar the desired width.

<div class="determinate">
  <div class="progressbar" style="width: 10%"></div>


The indeterminate progress indicator will continue forever.

<div class="indeterminate"></div>


The buffer progressbar is still a work in process.

<div class="buffer">
  <div class="buffer-progress" style="width: 50%;">
    <div class="progressbar" style="width: 90%;"></div>
  <div class="buffering" style="width: 50%; left: 50%;"></div>


The circular progress can easily be changed in SCSS. You can change the width of the loader and the color(s).

<div class="circular"></div>