Tailwind CSS Progress Bar - React

Our Tailwind CSS progressbar can be used to show a user how far along he is in a process. The progress can be determinate or indeterminate. Use the Progress Bar to show an ongoing process that takes a noticeable time to finish.

Below we are presenting our examples of Progress component that you can use in your Tailwind CSS and React project. It comes in different styles and colors, so you can adapt it easily to your needs.

Progress Bar Variants

The Progress component comes with 2 different variants that you can change it using the color prop.

import { Progress } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Progress value={50} variant="filled" />
      <Progress value={50} variant="gradient" />
    </div>
  );
}

Progress Bar Sizes

The Progress component comes with 3 different sizes that you can change it using the size prop.

import { Progress } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Progress value={25} size="sm" />
      <Progress value={50} size="md" />
      <Progress value={75} size="lg" />
    </div>
  );
}

Progress Bar Colors

The Progress component comes with 19 different colors that you can change it using the color prop.

import { Progress } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Progress value={50} color="blue" />
      <Progress value={50} color="red" />
      <Progress value={50} color="green" />
      <Progress value={50} color="amber" />
      <Progress value={50} color="teal" />
      <Progress value={50} color="indigo" />
      <Progress value={50} color="purple" />
      <Progress value={50} color="pink" />
    </div>
  );
}

Progress Bar with Label

You can add custom label inside the progress bar using the label prop.

50% Completed

Progress Bar Sizes with Label

The Progress component sizes are different when you use the label prop, this helps to make the label text more readable.

25% Small

50% Medium

75% Large

import { Progress } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Progress value={25} size="sm" label="Small" />
      <Progress value={50} size="md" label="Medium" />
      <Progress value={75} size="lg" label="Large" />
    </div>
  );
}

Progress Bar with Label Outside

Use the example below to add the label outside the progress bar.

Completed

50%

import { Progress, Typography } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="w-full">
      <div className="flex items-center justify-between gap-4 mb-2">
        <Typography color="blue" variant="h6">Completed</Typography>
        <Typography color="blue" variant="h6">50%</Typography>
      </div>
      <Progress value={50} />
    </div>
  );
}

Props

Learn more about props definition and types of progress bar component.

Theme

Learn how to customize the theme and styles for progress bar component.

popover

pagination

Edit this page on Github