Progress Bar

Progress bars display an indicator showing the completion/progress of a task.

80%

80%

import React from 'react';
import { ProgressBar } from 'chic-ui';

<>
  <ProgressBar progress={80} />
  <ProgressBar progress={80} type="danger" />
</>;

You can hide the progress using showProgress prop.

80%

import React from 'react';
import { ProgressBar } from 'chic-ui';

<ProgressBar progress={80} type="success" showProgress="false" />;

API

import { ProgressBar } from 'chic-ui';

Name	Type	Default	Description
progress	number	70	Amount of progress
type	'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'light'	'primary'	Type of ProgressBar
showProgress	boolean	true	Show progress number
animated	boolean	false	Add animation to the ProgressBar
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component