Skip to main content

Linear Progress

Available from version 0.2.0

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

Basics​

import { LinearProgress } from 'tailwind-joy/components';

Customization​

Variants​

The Linear Progress component supports four variants: solid, soft (default), outlined, and plain.

import { Box, LinearProgress } from 'tailwind-joy/components';

export function LinearProgressVariants() {
  return (
    <Box className="w-full space-y-4">
      <LinearProgress variant="solid" />
      <LinearProgress variant="soft" />
      <LinearProgress variant="outlined" />
      <LinearProgress variant="plain" />
    </Box>
  );
}

Sizes​

The Linear Progress component supports three sizes: sm, md (default), and lg.

import { Box, LinearProgress } from 'tailwind-joy/components';

export function LinearProgressSizes() {
  return (
    <Box className="w-full space-y-4">
      <LinearProgress size="sm" />
      <LinearProgress size="md" />
      <LinearProgress size="lg" />
    </Box>
  );
}

Colors​

The Linear Progress component supports five colors: primary (default), neutral, danger, success, and warning.

import { Box, LinearProgress } from 'tailwind-joy/components';

export function LinearProgressColors() {
  return (
    <Box className="w-full space-y-4">
      <LinearProgress color="primary" />
      <LinearProgress color="neutral" />
      <LinearProgress color="danger" />
      <LinearProgress color="success" />
      <LinearProgress color="warning" />
    </Box>
  );
}

Thickness​

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

import { LinearProgress } from 'tailwind-joy/components';

export function LinearProgressThickness() {
  return <LinearProgress thickness={1} />;
}

Determinate​

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

import { Box, LinearProgress } from 'tailwind-joy/components';

export function LinearProgressDeterminate() {
  return (
    <Box className="w-full space-y-4">
      <LinearProgress determinate value={25} />
      <LinearProgress determinate value={50} />
      <LinearProgress determinate value={75} />
      <LinearProgress determinate value={100} />
    </Box>
  );
}

Anatomy​

The Linear Progress component is composed of a single root <div> element that wraps around its contents:

<div role="progressbar" class="tj-linear-progress-root ...">
  <!-- Linear Progress contents -->
</div>

API​

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