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

Prop	Type	Default	Description
percent	number	75	Completion percentage (0-100).
status	string	"normal"	Current status of the progress bar.
type	string	"line"	Display type: line, circle, or dashboard gauge.
striped	boolean	false	Whether to show striped animation on the bar.
showInfo	boolean	true	Whether to show the percentage text.
strokeLinecap	string	"round"	Shape of the progress bar endpoints.

Import

import { ProgressBar } from '@superset-ui/core/components';

---

Improve this page

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