Progress

Version - 0.0.9

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Installation

npm install @volta/progress

Usage

import { Progress } from '@volta/progress';

<Progress value={50} />

Examples

Sizes

The Button component comes with 3 different sizes that you can change it using the size prop.

import { Progress } from '@volta/progress';
 
export function ProgressSizes() {
  return (
    <div>
      <Progress value={50} size="sm" />
      <Progress value={50} size="md" />
      <Progress value={50} size="lg" />
    </div>
  );
}

Colors

The Button component comes with 4 different colors that you can change it using the color prop.

import { Progress } from '@volta/progress';
 
export function ProgressSizes() {
  return (
    <div>
      <Progress value={50} color="primary" size="lg" />
      <Progress value={50} color="secondary" size="lg" />
      <Progress value={50} color="black" size="lg" />
      <Progress value={50} color="gradient" size="lg" />
    </div>
  );
}

Progress Props

The following props are available for progress component.

Attribute	Type	Description	Default
`size`	Size	Change progress size	`md`
`color`	Colors	Change progress colors	`primary`
`className`	`string`	Add custom className for progress	`''`

Popover Radio Group