---
components: CircularProgress, LinearProgress
---

# Progress

[Progress and activity indicators](https://material.google.com/components/progress-activity.html)
are visual indications of an app loading content.

A single visual indicator should be used to represent each type of operation.
For example, a refresh operation should display either a refresh bar or an activity circle, but not both.

**Determinate** indicators display how long an operation will take.

**Indeterminate** indicators visualize an unspecified wait time.

## Circular

### Indeterminate

{{demo='pages/component-demos/progress/CircularIndeterminate.js'}}

### Interactive Integration

{{demo='pages/component-demos/progress/CircularFab.js'}}

###  Determinate

{{demo='pages/component-demos/progress/CircularDeterminate.js'}}

## Linear

### Indeterminate

{{demo='pages/component-demos/progress/LinearIndeterminate.js'}}

### Determinate

{{demo='pages/component-demos/progress/LinearDeterminate.js'}}

### Buffer

{{demo='pages/component-demos/progress/LinearBuffer.js'}}

### Query

{{demo='pages/component-demos/progress/LinearQuery.js'}}