Progress

Availity Progress Bar

Installation

npm

npm install @availity/progress

Yarn

yarn add @availity/progress

Example

import React from 'react';
import Progress from '@availity/progress';

const Example = () => (
  <>
    <p>50% Complete</p>
    <Progress animated={false} striped complete={false} value={50} max={100} />
  </>
);

Live example

Storybook

Props

tag?: React.ComponentType | string

The tag to render the progress bar as. Default: <div>.

animated?: boolean

Triggers the "animated" style in the progress bar.

striped?: boolean

Triggers the "striped" style in the progress bar.

complete?: boolean

Triggers the "complete" style in the progress bar. When true, a checkmark appears at the end of the progress bar

value?: number

The amount of the progress bar that should be filled (relative to the max) Default: 0.

max? number

The maximum amount of the progress bar. Default: 100.

color?: string

The color of the progress bar. Default: success.