Progress | Pol-ui - A beautiful and functional UI library for React and Next.js

Use the progress bar component from Pol-ui to show the percentage and completion rate of a given task using a visually friendly bar meter based on multiple styles and sizes.

Choose one of the examples below for your application and use the React props to update the progress fill rate, label, sizing, and colors and customize with the classes from Tailwind CSS.

To start using the progress bar component make sure you import it first from Pol-ui:

Importation

Import the component from pol-ui to use the Progress element:

import { Progress } from "pol-ui";

Default Progress

Use this example to show a progress bar where you can set the progress rate using the progress prop from React which should be a number from 1 to 100.

Default Progress

import { Progress } from "pol-ui";
 
const ProgressComponent = () => {
  return <Progress progress={45} />;
};
export default ProgressComponent;

Props

Prop name	Type	Default	Description
progress	number	75	The progress rate from 1 to 100
size	MainSizes	MainSizesEnum.md	The size of the progress bar
label	string	-	The label to be displayed on the progress bar
theme	ProgressTheme	-	The theme to be used on the progress bar
hasMotion	boolean	true	If the progress bar should have motion
color	Colors	ColorsEnum.primary	The color of the progress bar
rounded	keyof RoundedSizesElastic	RoundedSizesEnum.full	The rounded size of the progress bar
barClassName	string	-	The class name to be used on the progress bar

Examples

All rounded sizes

The amount of roundness of the popover popup can be customized using the rounded prop. The following example shows all the available rounded sizes.

All rounded sizes

import { Progress, RoundedSizesEnum } from "pol-ui";
 
const ProgressComponent = () => {
  return (
    <div className="flex gap-4 flex-col">
      {Object.keys(RoundedSizesEnum).map((r) => (
        <Progress progress={45} rounded={r} label={r} key={r} />
      ))}
    </div>
  );
};
export default ProgressComponent;

All sizes

The progress bar can be customized using the size prop. The following example shows all the available sizes.

All sizes

import { Progress, MainSizesEnum, MainSizes } from "pol-ui";
 
const ProgressComponent = () => {
  return   <div className="flex gap-4 flex-col">
    {Object.keys(MainSizesEnum).map(v => (
      <Progress progress={45} size={v as MainSizes} label={v} key={v} />
    ))}
  </div>
};
export default ProgressComponent;

All colors

The progress bar can be customized using the color prop. The following example shows all the available colors.

All colors

import { Progress, ColorsEnum, Colors } from "pol-ui";
 
const ProgressComponent = () => {
  return  <div className="flex gap-4 flex-col">
    {Object.keys(ColorsEnum).map(color => (
      <Progress progress={45} color={color as Colors} label={color} key={color} />
    ))}
  </div>
};
export default ProgressComponent;

Custom className

All colors

import { Progress } from "pol-ui";
 
const ProgressComponent = () => {
  return (
    <Progress progress={45} className="bg-orange-100 text-white rounded-sm " />
  );
};
export default ProgressComponent;

Without motion

The motion component has a default animation, but you can disable it setting the hasMotion prop to false.

Progress without motion

import { Progress } from "pol-ui";
 
const ProgressComponent = () => {
  return (
    <Progress
      progress={45}
      hasMotion={false}
      label="This progress bar has no motion"
    />
  );
};
export default ProgressComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface ProgressTheme {
  base: string;
  label: string;
  bar: string;
  color: ColorsType;
  size: MainSizesType;
  rounded: RoundedSizesTypes;
}