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

You can set label inside the Progressbar using label property. It will only work when size="xl".

75%

import { Progressbar } from "rizzui";

export default function App() {
  return <Progressbar value={75} size="xl" label="75%" />;
}

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 compoents are	"md"
rounded	ProgressbarRounded	The rounded variants are:	"pill"
color	ProgressbarColor	Pass color variations	"primary"
barClassName	string	To style bar of the component	__
labelClassName	string	To style label	__
className	string	To style entire progressbar component	__

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";