ProgressCricle

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:

ProgressCircle

Type

Components

import

import { ProgressCricle } from '@pillar-ui/core'
Go To progress-circle Source CodeIssuesdiscussions

Usage

import { Progress } from '@pillar-ui/core'
<Progress />

Examples

value

100%
50%
30%
12%
22%
50%
import { ProgressCircle } from '@pillar-ui/core'

export const ProgressCircleValue = () => {
  return (
    <>
      <ProgressCircle value={100} label="hello" />
      <ProgressCircle value={50} label="hello" />
      <ProgressCircle value={30} label="hello" />
      <ProgressCircle value={12} label="hello" />
      <ProgressCircle value={22} label="hello" />
      <ProgressCircle value={50} label="hello" />
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
15%
15%
15%
30%
45%
60%
90%
95%
95%
import { ProgressCircle } from '@pillar-ui/core'

export const ProgressCircleSize = () => {
  return (
    <>
      <ProgressCircle size="1" value={15} label="hello" />
      <ProgressCircle size="2" value={15} label="hello" />
      <ProgressCircle size="3" value={15} label="hello" />
      <ProgressCircle size="4" value={30} label="hello" />
      <ProgressCircle size="5" value={45} label="hello" />
      <ProgressCircle size="6" value={60} label="hello" />
      <ProgressCircle size="7" value={90} label="hello" />
      <ProgressCircle size="8" value={95} label="hello" />
      <ProgressCircle size="9" value={95} label="hello" />
    </>
  )
}

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'
90%
90%
90%
90%
90%
90%
90%
import { ProgressCircle } from '@pillar-ui/core'

export const ProgressCircleColor = () => {
  return (
    <>
      <ProgressCircle color="d" value={90} label="hello" />
      <ProgressCircle color="su" value={90} label="hello" />
      <ProgressCircle color="w" value={90} label="hello" />
      <ProgressCircle color="se" value={90} label="hello" />
      <ProgressCircle color="b" value={90} label="hello" />
      <ProgressCircle color="p" value={90} label="hello" />
      <ProgressCircle color="i" value={90} label="hello" />
    </>
  )
}

Min

50%
500%
-40%
import { ProgressCircle } from '@pillar-ui/core'

export const ProgressCircleMin = () => {
  return (
    <>
      <ProgressCircle value={50} min={0} label="hello" />
      <ProgressCircle value={500} min={0} label="hello" />
      <ProgressCircle value={30} min={50} label="hello" />
    </>
  )
}

Max

5%
500%
500%
316.67%
import { ProgressCircle } from '@pillar-ui/core'

export const ProgressCircleMax = () => {
  return (
    <>
      <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" />
    </>
  )
}

previous

Paper

next

Progress