Circular Progress Bar

Circular Progress bars serve the same purpose as simple progress bars, i.e display an indicator showing the completion/progress of a task.

30%

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

<CircularProgressBar progress={30} type="primary" showProgress={true} />;

You can hide the progress using showProgress prop.

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

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

import { CircularProgressBar } from 'chic-ui';

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