Progress Component

ℹ️

The Progress component is a React component designed for displaying progress indicators. It supports various styles, including line, circle, and circle with background, providing flexibility for different use cases.

Example Preview

Progress

Usage

ℹ️

Import the Progress component and use it in your React application:

import { Progress } from "@/@core";
 
const MyComponent = () => {
  return (
    <Progress
      percent={50}
      color="primary"
      variant="line"
      max={100}
      thickness={8}
      size={80}
      label={true}
    />
  );
};
 
export default MyComponent;

Props

Prop	Type	Default	Description
`percent`	`number`	`0`	The percentage of completion for the progress indicator.
`color`	`primary`	`secondary`	`primary`, `secondary`, `success`, `warning`, `error`, `info`, `base`, Color of the progress indicator.
`variant`	`circle`	`line`	`circle`, `circle-with-bg`, `line`, Style variant for the progress indicator.
`max`	`number`	`100`	Maximum value for the progress indicator.
`thickness`	`number`	`8`	Thickness of the progress indicator (applicable to line and circle variants).
`size`	`number`	`80`	Size of the progress indicator (applicable to circle variants).
`className`	`string`	-	Additional class name for styling customization.
`label`	`boolean`	`true`	Whether to display the percentage label.

Additional Props

Refer to the HTMLAttributes<HTMLDivElement> interface for standard HTML div element attributes.

Examples

Check the provided MyComponent example for basic usage, and customize the component based on your specific needs.

ℹ️

Note: The Progress component is a versatile React component designed to visualize the progress of a task or operation. It offers customization options for various styles and sizes, providing a visually appealing way to represent progress. This component is inspired by the DaisyUI Progress (opens in a new tab), and DaisyUI Radial Progress (opens in a new tab) framework's design for progress bars. Check it out for more awesome components.

Popup Modal Skeleton