# Preloader

> Activity and progress. The HTML is the indicator.

## Linear

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](/loading-indicator.html.md) — 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>
```