Skip to main content
Version: Next

ProgressBar

Progress bar component for displaying completion status. Supports line, circle, and dashboard display types.

Live Example​

Loading component...

Try It​

Edit the code below to experiment with the component:

Live Editor
function Demo() {
  return (
    <ProgressBar
      percent={75}
      status="normal"
      type="line"
      showInfo
    />
  );
}
Result
Loading...

All Progress Types​

Live Editor
function AllTypesDemo() {
  return (
    <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
      <div style={{ flex: 1 }}>
        <h4>Line</h4>
        <ProgressBar percent={75} type="line" />
      </div>
      <div>
        <h4>Circle</h4>
        <ProgressBar percent={75} type="circle" />
      </div>
      <div>
        <h4>Dashboard</h4>
        <ProgressBar percent={75} type="dashboard" />
      </div>
    </div>
  );
}
Result
Loading...

Status Variants​

Live Editor
function StatusDemo() {
  const statuses = ['normal', 'success', 'exception', 'active'];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {statuses.map(status => (
        <div key={status} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{ width: 80 }}>{status}</span>
          <ProgressBar percent={75} status={status} type="line" style={{ flex: 1 }} />
        </div>
      ))}
    </div>
  );
}
Result
Loading...

Custom Colors​

Live Editor
function CustomColors() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <ProgressBar percent={50} strokeColor="#1890ff" />
      <ProgressBar percent={70} strokeColor="#52c41a" />
      <ProgressBar percent={30} strokeColor="#faad14" trailColor="#f0f0f0" />
      <ProgressBar percent={90} strokeColor="#ff4d4f" />
    </div>
  );
}
Result
Loading...

Props​

PropTypeDefaultDescription
percentnumber75Completion percentage (0-100).
statusstring"normal"Current status of the progress bar.
typestring"line"Display type: line, circle, or dashboard gauge.
stripedbooleanfalseWhether to show striped animation on the bar.
showInfobooleantrueWhether to show the percentage text.
strokeLinecapstring"round"Shape of the progress bar endpoints.

Import​

import ProgressBar from '@superset/components';
Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.