Progress

Name: Rence Material
Author: david abalaku

Progress indicators express an unspecified wait time or display the length of a process.

Loading States!

Linear Progress

4dp thickness

Determinate — 60%

Indeterminate

Built on Bootstrap's .progress. Use 4px height for the Material 3 standard.

Fluid loading!

HTML

<!-- Linear progress bar -->
<div class="progress mb-3" style="height: 4px;">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 60%;"></div>
</div>

<!-- Indeterminate (animated) -->
<div class="progress mb-3" style="height: 4px;">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary w-75" role="progressbar"></div>
</div>

Circular Progress

Use .spinner-border for circular progress. Set thinner border widths for a modern look.

Google Style Spinner!

HTML

<!-- Circular progress -->
<div class="spinner-border text-primary" role="status" style="width:3rem;height:3rem;border-width:3px;">
  <span class="visually-hidden">Loading...</span>
</div>