Skip to content
Skip to content

Linear Progress

Linear Progress indicators, commonly known as loaders, express an unspecified wait time or display the length of a process.

Introduction

Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.

The LinearProgress is indeterminate by default, indicating an unspecified wait time. To actually have it represent how long an operation will take, use the determinate mode.

The animations of the components rely on CSS as much as possible to work even before the JavaScript is loaded.

<LinearProgress />

Playground

Component

After installation, you can start building with this component using the following basic elements:

import LinearProgress from '@mui/joy/LinearProgress';

export default function MyApp() {
  return <LinearProgress />;
}

Variants

The linear progress component supports the four global variants: solid, soft (default), outlined, and plain.

Press Enter to start editing

Colors

Every palette included in the theme is available via the color prop. Play around combining different colors.

Variant:

Sizes

The linear progress component comes with three sizes out of the box: sm, md (the default), and lg.

Press Enter to start editing

Determinate

You can use the determinate prop if you want to indicate a specified wait time.

Press Enter to start editing

Thickness

Provides a number to thickness prop to control the bar's stroke width.

Press Enter to start editing

CSS variables

Play around with all the CSS variables available on the component to see how the design changes.

You can use those to customize the component on both the sx prop and the theme.

<LinearProgress />

CSS Variables

px

Default to root's thickness
Default to root's thickness
Default to root's thickness

Common examples

With label

LOADING… 0%

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.