progress-bar.mdx

title	Tailwind CSS Progress Bar for React - Material Tailwind
description	Customise your web projects with our easy-to-use progress bar component for Tailwind CSS and React using Material Design guidelines.
navigation	progress-bar progress-bar-variants progress-bar-sizes progress-bar-colors progress-bar-label progress-bar-sizes-label progress-bar-label-outside progress-bar-custom-styles progress-bar-props types-variant types-color types-label progress-bar-theme progress-bar-theme-object-type progress-bar-theme-customization more-examples
github	progress-bar
prev	popover
next	pagination

# 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.

<CodePreview link="progress-bar#progress-bar" component={<ProgressExamples.ProgressDefault />}>

import { Progress } from "@material-tailwind/react";

export function ProgressDefault() {
  return <Progress value={50} />;
}

---

## Progress Bar Variants

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

<CodePreview link="progress-bar#progress-bar-variants" component={<ProgressExamples.ProgressVariants />}>

import { Progress } from "@material-tailwind/react";

export function ProgressVariants() {
  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.

<CodePreview component={<ProgressExamples.ProgressSizes />}>

import { Progress } from "@material-tailwind/react";

export function ProgressSizes() {
  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.

<CodePreview link="progress-bar#progress-bar-colors" component={<ProgressExamples.ProgressColors />}>

import { Progress } from "@material-tailwind/react";

export function ProgressColors() {
  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 Label

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

<CodePreview link="progress-bar#progress-bar-label" component={<ProgressExamples.ProgressLabel />}>

import { Progress } from "@material-tailwind/react";

export function ProgressLabel() {
  return <Progress value={50} label="Completed" />;
}

---

## Progress Bar Sizes Label

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

<CodePreview id="progress-bar-sizes-label" component={<ProgressExamples.ProgressSizesLabel />}>

import { Progress } from "@material-tailwind/react";

export function ProgressSizesLabel() {
  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 Label Outside

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

<CodePreview id="progress-bar-label-outside" component={<ProgressExamples.ProgressLabelOutside />}>

import { Progress, Typography } from "@material-tailwind/react";

export function ProgressLabelOutside() {
  return (
    <div className="w-full">
      <div className="mb-2 flex items-center justify-between gap-4">
        <Typography color="blue-gray" variant="h6">
          Completed
        </Typography>
        <Typography color="blue-gray" variant="h6">
          50%
        </Typography>
      </div>
      <Progress value={50} />
    </div>
  );
}

---

## Progress Bar Custom Styles

You can use the className prop to add custom styles to the Progress component.

<CodePreview id="progress-bar-custom-styles" component={<ProgressExamples.ProgressCustomStyles />}>

import { Progress } from "@material-tailwind/react";

export function ProgressCustomStyles() {
  return (
    <Progress
      value={50}
      size="lg"
      className="border border-gray-900/10 bg-gray-900/5 p-1"
    />
  );
}

---

## Progress Bar Props

The following props are available for progress bar component. These are the custom props that we've added for the progress bar component and you can use all the other native props as well.

Attribute	Type	Description	Default
variant	Variant	Change progress bar variant	filled
color	Color	Change progress bar color	gray
size	Size	Change progress bar size	md
label	label	Add label for progress bar	undefined
value	number	Add the completed percentage for progress bar	0
barProps	object	Add custom props for progress bar percentage bar	undefined
className	string	Add custom className for progress bar	''

For TypeScript Only

import type { ProgressProps } from "@material-tailwind/react";

---

## Types - Variant

type variant = "filled" | "gradient";

---

## Types - Color

type color =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

---

## Types - Size

type size = "sm" | "md" | "lg";

---

## Types - Label

type label = string | boolean;

---

## Progress Bar Theme

Learn how to customize the theme and styles for progress bar component, the theme object for progress bar component has three main objects:

A. The defaultProps object for setting up the default value for props of progress bar component.
B. The valid object for customizing the valid values for progress bar component props.
C. The styles object for customizing the theme and styles of progress bar component.

You can customize the theme and styles of progress bar component by adding Tailwind CSS classes as key paired values for objects.

## Progress Bar Theme Object Type

interface ProgressStylesType {
  defaultProps: {
    variant: string;
    color: string;
    size: string;
    value: number;
    label: string | boolean;
    barProps: object;
    className: string;
  };
  valid: {
    variants: string[];
    colors: string[];
    sizes: string[];
  };
  styles: {
    base: {
      container: {
        initial: object;
        withLabel: object;
      };
      bar: object;
    };
    sizes: {
      sm: {
        container: {
          initial: object;
          withLabel: object;
        };
        bar: object;
      };
      md: {
        container: {
          initial: object;
          withLabel: object;
        };
        bar: object;
      };
      lg: {
        container: {
          initial: object;
          withLabel: object;
        };
        bar: object;
      };
    };
    variants: {
      filled: object;
      gradient: object;
    };
  };
}

For TypeScript Only

import type { ProgressStylesType } from "@material-tailwind/react";

---

## Progress Bar Theme Customization

const theme = {
  progress: {
    defaultProps: {
      variant: "filled",
      color: "blue",
      size: "md",
      value: 0,
      label: false,
      className: "",
      barProps: {},
    },
    valid: {
      variants: ["filled", "gradient"],
      colors: [
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
      sizes: ["sm", "md", "lg"],
    },
    styles: {
      base: {
        container: {
          initial: {
            display: "flex",
            justifyContent: "flex-start",
            bg: "bg-blue-gray-50",
            overflow: "overflow-hidden",
            width: "w-full",
            fontFamily: "font-sans",
            borderRadius: "rounded-full",
            fontSize: "text-xs",
            fontWeight: "font-medium",
          },
          withLabel: {},
        },
        bar: {
          display: "flex",
          justifyContent: "justify-center",
          alignItems: "items-center",
          height: "h-full",
          overflow: "overflow-hidden",
          wordBreak: "break-all",
          borderRadius: "rounded-full",
        },
      },
      sizes: {
        sm: {
          container: {
            initial: {
              height: "h-1.5",
            },
            withLabel: {
              height: "h-3.5",
            },
          },
          bar: {},
        },
        md: {
          container: {
            initial: {
              height: "h-2.5",
            },
            withLabel: {
              height: "h-4",
            },
          },
          bar: {},
        },
        lg: {
          container: {
            initial: {
              height: "h-3.5",
            },
            withLabel: {
              height: "h-5",
            },
          },
          bar: {},
        },
      },
      variants: {
        filled: {
          "blue-gray": {
            backgroud: "bg-blue-gray-500",
            color: "text-white",
          },
          gray: {
            backgroud: "bg-gray-500",
            color: "text-white",
          },
          brown: {
            backgroud: "bg-brown-500",
            color: "text-white",
          },
          "deep-orange": {
            backgroud: "bg-deep-orange-500",
            color: "text-white",
          },
          orange: {
            backgroud: "bg-orange-500",
            color: "text-white",
          },
          amber: {
            backgroud: "bg-amber-500",
            color: "text-black",
          },
          yellow: {
            backgroud: "bg-yellow-500",
            color: "text-black",
          },
          lime: {
            backgroud: "bg-lime-500",
            color: "text-black",
          },
          "light-green": {
            backgroud: "bg-light-green-500",
            color: "text-white",
          },
          green: {
            backgroud: "bg-green-500",
            color: "text-white",
          },
          teal: {
            backgroud: "bg-teal-500",
            color: "text-white",
          },
          cyan: {
            backgroud: "bg-cyan-500",
            color: "text-white",
          },
          "light-blue": {
            backgroud: "bg-light-blue-500",
            color: "text-white",
          },
          blue: {
            backgroud: "bg-blue-500",
            color: "text-white",
          },
          indigo: {
            backgroud: "bg-indigo-500",
            color: "text-white",
          },
          "deep-purple": {
            backgroud: "bg-deep-purple-500",
            color: "text-white",
          },
          purple: {
            backgroud: "bg-purple-500",
            color: "text-white",
          },
          pink: {
            backgroud: "bg-pink-500",
            color: "text-white",
          },
          red: {
            backgroud: "bg-red-500",
            color: "text-white",
          },
        },
        gradient: 
          "blue-gray": {
            backgroud: "bg-gradient-to-tr from-blue-gray-600 to-blue-gray-400",
            color: "text-white",
          },
          gray: {
            backgroud: "bg-gradient-to-tr from-gray-600 to-gray-400",
            color: "text-white",
          },
          brown: {
            backgroud: "bg-gradient-to-tr from-brown-600 to-brown-400",
            color: "text-white",
          },
          "deep-orange": {
            backgroud: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400",
            color: "text-white",
          },
          orange: {
            backgroud: "bg-gradient-to-tr from-orange-600 to-orange-400",
            color: "text-white",
          },
          amber: {
            backgroud: "bg-gradient-to-tr from-amber-600 to-amber-400",
            color: "text-black",
          },
          yellow: {
            backgroud: "bg-gradient-to-tr from-yellow-600 to-yellow-400",
            color: "text-black",
          },
          lime: {
            backgroud: "bg-gradient-to-tr from-lime-600 to-lime-400",
            color: "text-black",
          },
          "light-green": {
            backgroud: "bg-gradient-to-tr from-light-green-600 to-light-green-400",
            color: "text-white",
          },
          green: {
            backgroud: "bg-gradient-to-tr from-green-600 to-green-400",
            color: "text-white",
          },
          teal: {
            backgroud: "bg-gradient-to-tr from-teal-600 to-teal-400",
            color: "text-white",
          },
          cyan: {
            backgroud: "bg-gradient-to-tr from-cyan-600 to-cyan-400",
            color: "text-white",
          },
          "light-blue": {
            backgroud: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400",
            color: "text-white",
          },
          blue: {
            backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400",
            color: "text-white",
          },
          indigo: {
            backgroud: "bg-gradient-to-tr from-indigo-600 to-indigo-400",
            color: "text-white",
          },
          "deep-purple": {
            backgroud: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400",
            color: "text-white",
          },
          purple: {
            backgroud: "bg-gradient-to-tr from-purple-600 to-purple-400",
            color: "text-white",
          },
          pink: {
            backgroud: "bg-gradient-to-tr from-pink-600 to-pink-400",
            color: "text-white",
          },
          red: {
            backgroud: "bg-gradient-to-tr from-red-600 to-red-400",
            color: "text-white",
          },
        },
      },
    },
  },
};

---

## Explore More Tailwind CSS Examples

Check out more progress bar examples from Material Tailwind Blocks.