Pikas UI

@pikas-ui/progress

This package contains a progress component that can be used to display a progress bar.

This library is based on Radix Ui.

Change Log

To use this package, you must install the @pikas-ui/styles package.

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/progress

yarn add @pikas-ui/progress

pnpm add @pikas-ui/progress

The progress component is used to display a progress bar.

50%50%

25/10025/100

import { Progress } from '@pikas-ui/progress';

const Example: React.FC = () => {
  return <Progress progress={60} />;
};

Prop	Description	Type	Default
`progress`	The progress value of the progress.	`number`	`0`
`max`	The max value of the progress.	`number or string`	`100`
`width`	The width of the progress.	`number or string`	`280`
`height`	The height of the progress.	`number or string`	`16`
`colorName`	The color of the progress.	`PikasColors`	`"primary"`
`backgroundColorName`	The background color of the progress.	`PikasColors`	`"gray"`
`loading`	The loading state of the progress.	`boolean`	`false`
`boxShadow`	The box shadow of the progress.	`PikasShadow or 'none"`	`"inner-md"`
`borderRadius`	The border radius of the progress.	`PikasRadius`	`"full"`
`borderRadiusIndicator`	The border radius of the indicator.	`PikasRadius`	`"none"`
`getValueLabel`	The function to get the label of the progress.	`(value: number, max: number) => string`	`(value, max): string => Math.round((value / max) * 100) + "%"`
`css`	The css of the progress.	`ProgressCSS`	-
`content`	The content of the progress.	`string`	-

This documentation can be edited on GitHub here