Progress Bar
View in LexiconProgress bar indicates the percentage completed of a task.
| install | yarn add @clayui/progress-bar |
|---|---|
| version |  |
| use | import ProgressBar from '@clayui/progress-bar'; |
Table of Contents
As long as the process is running, the progress bar grows continuously from 0% to 100%.
If you need to communicate the progress of a certain set of actions. You should use the Multi Step Nav component.
import {Provider} from '@clayui/core';
import ProgressBar from '@clayui/progress-bar';
import React from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<>
<ProgressBar value={50} />
<ProgressBar value={100} />
<ProgressBar value={20} />
<ProgressBar value={20} />
</>
</div>
</Provider>
);
}
Status
You can use value property to define the percentage value of the progress bar.
When value is 100, the color of the progress bar will be styled to success.
Also, you can use warn property to set the color of the progress bar fixed on warning.
import {Provider} from '@clayui/core';
import ProgressBar from '@clayui/progress-bar';
import React from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<>
<ProgressBar value={0} />
<ProgressBar value={50} />
<ProgressBar value={100} />
<ProgressBar value={50} warn />
<ProgressBar value={100} warn />
</>
</div>
</Provider>
);
}
Feedback
Use feedback property to provide the same visual feedback to all items wrapped by ClayProgressBar.
import {Provider} from '@clayui/core';
import ProgressBar from '@clayui/progress-bar';
import React from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<>
<ProgressBar feedback value={99}>
<div className="progress-group-addon">
99% Completed
</div>
</ProgressBar>
<ProgressBar feedback value={100}>
<div className="progress-group-addon">
100% Completed
</div>
</ProgressBar>
<ProgressBar feedback value={99} warn>
<div className="progress-group-addon">
99% Completed
</div>
</ProgressBar>
</>
</div>
</Provider>
);
}
Table of Contents