Tailwind CSS React Progress Bar - Horizon UI

Our Tailwind CSS React 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 Colors

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

import { Progress } from "components/Progress";
 
export default function Colors() {
  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>
  );
}

Circular Progress Bar

Conversion

66%

import CircularProgress from "components/charts/CircularProgress";
 
export default function Colors() {
  return (
    <div className="w-[180px]">
        <CircularProgress title="Conversion" percentage="66" />
    </div>
  );
}

popover

radio button