Progress Bar

Progress 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

Status
Feedback
API Reference

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.

Open Sandbox

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.

Open Sandbox

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.

Open Sandbox

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>
	);
}

API Reference

ProgressBar

({ children, className, feedback, spritemap, value, warn, ...otherProps }: IProps) => JSX.Element

Parameters

Properties

feedback

boolean | undefined

Flag to indicate if children should be wrapped as feedback.

value *

number

The current value of the progress bar. Should range from 0 to 100.

spritemap

string | undefined

Path to spritemap for icon symbol.

warn

boolean | undefined

Flag to indicate whether a "warning" color for the bar.

Returns

Element

Edit this page on GitHub

Contributors

Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Krešimir Čoko

Last edited May 9, 2025 at 6:15:38 AM

Table of Contents

Status
Feedback
API Reference