Progress & activity usage

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

Determinate

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>
</div>
		
	

Indeterminate

The indeterminate progress indicator will continue forever.

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

Buffer

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>
  <div class="buffering" style="width: 50%; left: 50%;"></div>
</div>
		
	

Circular

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>
		
	

Resources