Preloader - ExpressiveCSS

If content will take a while to load, give the user feedback. Linear bars are a native <progress>. Circular spinners are one element. Both are CSS-only — there is no JavaScript plugin.

Linear

A value is determinate. Omit it for an indeterminate bar. The fill is primary on a secondary-container track.

Determinate

<progress class="progress" value="70" max="100"></progress>

A div still works. Set the width on .determinate, or set --md-comp-progress-value on the bar.

<div class="progress" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
  <div class="determinate" style="width: 70%"></div>
</div>

<div class="progress" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="--md-comp-progress-value: 70%"></div>

Indeterminate

<progress class="progress"></progress>

The child class is the alias:

<div class="progress" role="progressbar">
  <div class="indeterminate"></div>
</div>

Circular

For an indeterminate wait under about five seconds, prefer the loading indicator — it supersedes the indeterminate circular spinner. The indeterminate spinner below still works and is not deprecated — it is no longer the default for a short wait.

One element. Default size is 48px. small is 36px, big is 64px. It uses the primary token. prefers-reduced-motion freezes the arc.

<span class="progress circular" role="status" aria-label="Loading"></span>
<span class="progress circular small" role="status" aria-label="Loading"></span>
<span class="progress circular big" role="status" aria-label="Loading"></span>

Add determinate and set --md-comp-progress-value for a known percentage.

<span class="progress circular determinate"
      style="--md-comp-progress-value: 70%"
      role="progressbar" aria-valuenow="70"
      aria-valuemin="0" aria-valuemax="100"
      aria-label="Loading"></span>

Colors

The indicator follows the theme. Override --md-comp-progress-indicator to use another role.

<span class="progress circular"
      style="--md-comp-progress-indicator: var(--md-sys-color-error)"
      role="status" aria-label="Loading"></span>