ProgressBar

The ProgressBar component is a visual indicator that shows the progress of a task or operation.

Basic Usage

import { ProgressBar, ThemeProvider } from "@carton-org/react-neumorphism";

const MyComponent = () => {
  return <ProgressBar progress={75} label="Loading..." showLabel />;
};

Live Example

Loading...75%

Props

Name	Type	Description	Required	Default Value
progress	number	Progress value (0-100)	Yes	-
label	string	Text label for the progress bar	No	-
showLabel	boolean	Whether to display the label	No	false
size	"xs" | "sm" | "md" | "lg" | "xl"	Size of the progress bar	No	"sm"
insetLabel	boolean	Whether to use inset style for the label	No	false
progressBarColor	React.CSSProperties["color"]	Custom color for the progress bar	No	-

Examples

Different Sizes

Small Size

Small Progress75%

Medium Size

Medium Progress75%

Large Size

Large Progress75%

Different Progress Values

25% Progress

Quarter Complete25%

50% Progress

Halfway There50%

100% Progress

Complete100%

With Inset Label

Inset Label

75%

Custom Progress Bar Color

Custom Color75%