Pillar UI React Progress Component documentation

The Progress component is a UI component that represents the progress of a task or operation. It visually displays the completion percentage and can be customized with different sizes and colors.

Components:

ProgressBar ProgressCircle ProgressBarStack ProgressBarStackItem

Type

Components

import

import { Pillar UI React Progress Component } from '@pillar-ui/core'
Go To progress Source CodeIssuesdiscussions

Props

The following are the props that can be used with the ProgressBar component:

value

The value prop is used to specify the completion percentage of the task or operation. It should be a number between 0 and 100.

Example:

100%
50%
30%
12%
22%
50%

// ProgressBar
<ProgressBar size="2xs" value={100} label="hello" />
<ProgressBar size="xs" value={50} label="hello" />
<ProgressBar size="xs" value={30} label="hello" />

// ProgressCircle
<ProgressBar size="2xs" value={12} label="hello" />
<ProgressBar size="xs" value={22} label="hello" />
<ProgressBar size="xs" value={50} label="hello" />

Label

The label prop is used to provide a descriptive label or text for the Progress. It is typically used to indicate the task or operation being represented by the Progress.

90%
90%
90%
90%
// ProgressBar
<ProgressBar value={90} label="Video Time" />
<ProgressBar value={90} label="Download percentage" />

// ProgressCircle
<ProgressBar value={90} label="Video Time" />
<ProgressBar value={90} label="Download percentage" />

Size

  • Type: string
  • Default: md
  • Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop is used to specify the size of the ProgressBar component. It supports various size options.

Example:

90%
90%
90%
90%
90%
90%
90%
15%
15%
30%
45%
60%
90%
95%

// ProgressBar
<ProgressBar size="2xs" value={90} label="hello" />
<ProgressBar size="xs" value={90} label="hello" />
<ProgressBar size="sm" value={90} label="hello" />
<ProgressBar size="md" value={90} label="hello" />
<ProgressBar size="lg" value={90} label="hello" />
<ProgressBar size="xl" value={90} label="hello" />
<ProgressBar size="2xl" value={90} label="hello" />

// ProgressCircle
<ProgressCircle size="2xs" value={15} label="hello" />
<ProgressCircle size="xs" value={15} label="hello" />
<ProgressCircle size="sm" value={30} label="hello" />
<ProgressCircle size="md" value={45} label="hello" />
<ProgressCircle size="lg" value={60} label="hello" />
<ProgressCircle size="xl" value={90} label="hello" />
<ProgressCircle size="2xl" value={95} label="hello" />

// ProgressBarStack
<ProgressBarStack size='sm' label="Nice to meet you">
    <ProgressBarStack.Item label="CSS" color="dan" value={30}>
        <button>CSS 30</button>
    </ProgressBarStack.Item>
    <ProgressBarStack.Item label="HTML" color="suc" value={15}>
        <button>HTML 15%</button>
    </ProgressBarStack.Item>
    <ProgressBarStack.Item label="React" color="sec" value={25}>
        <button>React 25%</button>
    </ProgressBarStack.Item>
    <ProgressBarStack.Item label="Node" color="pri" value={15}>
        <button>Node 15%</button>
    </ProgressBarStack.Item>
    <ProgressBarStack.Item label="SCSS" color="war" value={15}>
        <button>SCSS 15%</button>
    </ProgressBarStack.Item>
</ProgressBarStack>

Color

  • Type: string
  • Default: primary
  • Options: danger | warning | success | primary | bg | primary | secondary

The color prop is used to specify the color of the ProgressBar component. It supports various color options.

Example:

90%
90%
90%
90%
90%
90%
90%
90%
90%
90%
90%
90%
// ProgressBar
<ProgressBar color="dan" value={90} label="hello" />
<ProgressBar color="suc" value={90} label="hello" />
<ProgressBar color="war" value={90} label="hello" />
<ProgressBar color="sec" value={90} label="hello" />
<ProgressBar color="bg" value={90} label="hello" />
<ProgressBar color="pri" value={90} label="hello" />

// ProgressCircle
<ProgressCircle color="dan" value={90} label="hello" />
<ProgressCircle color="suc" value={90} label="hello" />
<ProgressCircle color="war" value={90} label="hello" />
<ProgressCircle color="sec" value={90} label="hello" />
<ProgressCircle color="bg" value={90} label="hello" />
<ProgressCircle color="pri" value={90} label="hello" />

// ProgressBarStack

<ProgressBarStack label="Nice to meet you">
    <ProgressBarStack.Item label="CSS" color="dan" value={30}>
        <button>CSS 30</button>
    </ProgressBarStack.Item>
    <ProgressBarStack.Item label="HTML" color="suc" value={15}>
        <button>HTML 15%</button>
    </ProgressBarStack.Item>
    <ProgressBarStack.Item label="React" color="sec" value={25}>
        <button>React 25%</button>
    </ProgressBarStack.Item>
    <ProgressBarStack.Item label="Node" color="pri" value={15}>
        <button>Node 15%</button>
    </ProgressBarStack.Item>
    <ProgressBarStack.Item label="SCSS" color="war" value={15}>
        <button>SCSS 15%</button>
    </ProgressBarStack.Item>
</ProgressBarStack>

Min

The min prop is used to specify the minimum value of the range for the ProgressBar. It should be a number.

Example:

50%
100%
100%
50%
500%
175%
// ProgressBar
<ProgressBar value={50} min={0}  label="hello" />
<ProgressBar value={500} min={0}  label="hello" />
<ProgressBar value={250} min={-100}  label="hello" />

// ProgressCircle
<ProgressCircle value={50} min={0}  label="hello" />
<ProgressCircle value={500} min={0}  label="hello" />
<ProgressCircle value={250} min={-100}  label="hello" />

Max

The max prop is used to specify the maximum value of the range for the ProgressBar. It should be a number.

Example:

50%
100%
50%
120%
5%
500%
500%
316.67%
// ProgressBar
<ProgressBar value={50} max={1000}  label="hello" />
<ProgressBar value={500} max={100}  label="hello" />
<ProgressBar value={250} max={50}  label="hello" />
<ProgressBar value={250} min={60} max={120}  label="hello" />

// ProgressCircle
<ProgressCircle value={50} max={1000}  label="hello" />
<ProgressCircle value={500} max={100}  label="hello" />
<ProgressCircle value={250} max={50}  label="hello" />
<ProgressCircle value={250} min={60} max={120}  label="hello" />

Use Case

The Progress component can be used to visually represent the progress of a task or operation. It provides a clear indication of the completion percentage and can be used in various contexts such as file uploads, form submissions, or any process that requires tracking progress.

Troubleshooting

If you encounter any issues with the Progress component, make sure that you have correctly passed the props and values. If you are still having issues, check the console for any error messages.

Conclusion

The Progress component is a versatile UI component for displaying the progress of a task or operation. It provides customization options for size and color, making it suitable for various UI designs. The ProgressBar enhances user experience by providing visual feedback on the progress status.