Progressbar

A basic widget for showing the work progress.

import { Progressbar } from "rizzui";

Default

The default style of Progressbar.

import { Progressbar } from "rizzui";

export default function App() {
  return <Progressbar value={75} />;
}

Variants

You can change the style of Progressbar using variant property.

import { Progressbar } from "rizzui";

export default function App() {
  return (
    <>
      <Progressbar
        variant="flat"
        value={75}
      />
      <Progressbar
        variant="solid"
        value={75}
      />
    </>
  );
}

Sizes

You can change the size of Progressbar using size property.

import { Progressbar } from "rizzui";

export default function App() {
  return (
    <>
      <Progressbar
        value={45}
        size="sm"
      />
      <Progressbar value={65} />
      <Progressbar
        value={75}
        size="lg"
      />
      <Progressbar
        value={85}
        size="xl"
      />
    </>
  );
}

Rounded

You can change the border radius of Progressbar using rounded property.

import { Progressbar } from "rizzui";

export default function App() {
  return (
    <>
      <Progressbar
        value={45}
        rounded="sm"
      />
      <Progressbar value={65} />
      <Progressbar
        value={75}
        rounded="md"
      />
      <Progressbar
        value={85}
        rounded="lg"
      />
      <Progressbar
        value={95}
        rounded="none"
      />
    </>
  );
}

Colors

You can change the color of Progressbar using color property.

import { Progressbar } from "rizzui";

export default function App() {
  return (
    <>
      <Progressbar value={25} />
      <Progressbar
        value={45}
        color="secondary"
      />
      <Progressbar
        value={65}
        color="danger"
      />
      <Progressbar
        value={75}
        color="info"
      />
      <Progressbar
        value={85}
        color="success"
      />
      <Progressbar
        value={95}
        color="warning"
      />
    </>
  );
}

With Label and Label Position

You can set label of Progressbar using label property. And set position of label using labelPosition property.

Note: labelPosition='insideBar' property will only work when size="xl".

75%

75%

75%

import { Progressbar } from "rizzui";

export default function App() {
  return (
    <div className="grid grid-cols-1 gap-10 w-full">
      <Progressbar
        value={75}
        label="75%"
      />
      <Progressbar
        value={75}
        label="75%"
        labelPosition="inlineLeft"
      />
      <Progressbar
        value={75}
        label="75%"
        size="xl"
        labelPosition="insideBar"
      />
    </div>
  );
}

API Reference

---

Progressbar Props

Here is the API documentation of the Progressbar component.

Props	Type	Description	Default
value	number	Percentage of filled bar	__
label	string	Pass label to show percentage inside bar. It will only work when size="xl"	""
variant	solid flat	The variants of the components are:	"solid"
size	ProgressbarSize	Size of the components are	"md"
rounded	ProgressbarRounded	The rounded variants are:	"pill"
color	ProgressbarColor	Pass color variations	"primary"
labelPosition	ProgressbarLabelPosition	Sets the label position of progressbar component	"inlineRight"
className	string	To style the root of the component	__
barClassName	string	To style bar of the component	__
trackClassName	string	To style progressbar track of the component	__
labelClassName	string	To style label	__

Progressbar Sizes

type ProgressbarSizes = "sm" | "md" | "lg" | "xl";

Progressbar Rounded

type ProgressbarRounded = "sm" | "md" | "lg" | "pill" | "none";

Progressbar Colors

type ProgressbarColors = "primary" | "secondary" | "danger" | "info" | "success" | "warning";

Progressbar Label Position

type ProgressbarLabelPosition = "inlineLeft" | "inlineRight" | "insideBar";