Progressbar

A basic widget for showing the work progress.

import { Progressbar } from 'rizzui/progressbar';

Default

The default style of Progressbar.

import { Progressbar } from 'rizzui/progressbar';

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

Variants

You can change the style of Progressbar using variant property.

import { Progressbar } from 'rizzui/progressbar';

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/progressbar';

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

Colors

You can change the color of Progressbar using color property.

import { Progressbar } from 'rizzui/progressbar';

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="lg".

75%

75%

75%

import { Progressbar } from 'rizzui/progressbar';

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%" 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="lg"	""
variant	solid flat	The variants of the components are:	"solid"
size	ProgressbarSize	Size of the components are	"md"
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';

Progressbar Colors

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

Progressbar Label Position

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