Progress

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 { Progress } from '@pillar-ui/core'
Go To progress Source CodeIssuesdiscussions

Usage

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

Examples

ProgressBar

value

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

export const ProgressValue = () => {
  return (
    <Flex direction="col" gap="6">
      <ProgressBar size="2" value={100} label="hello" />
      <ProgressBar size="3" value={50} label="hello" />
      <ProgressBar size="3" value={30} label="hello" />
      <ProgressBar size="2" value={12} label="hello" />
      <ProgressBar size="3" value={22} label="hello" />
      <ProgressBar size="3" value={50} label="hello" />
    </Flex>
  )
}

Label

90%
90%
90%
90%
import { Flex, ProgressBar } from '@pillar-ui/core'

export const ProgressLabel = () => {
  return (
    <Flex direction="col" gap="6">
      <ProgressBar value={90} label="Video Time" />
      <ProgressBar value={90} label="Download percentage" />
      <ProgressBar value={90} label="Video Time" />
      <ProgressBar value={90} label="Download percentage" />
    </Flex>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
90%
90%
90%
90%
90%
90%
90%
90%
90%
import { Flex, ProgressBar } from '@pillar-ui/core'

export const ProgressSize = () => {
  return (
    <Flex direction="col" gap="6">
      <ProgressBar size="1" value={90} label="hello" />
      <ProgressBar size="2" value={90} label="hello" />
      <ProgressBar size="3" value={90} label="hello" />
      <ProgressBar size="4" value={90} label="hello" />
      <ProgressBar size="5" value={90} label="hello" />
      <ProgressBar size="6" value={90} label="hello" />
      <ProgressBar size="7" value={90} label="hello" />
      <ProgressBar size="8" value={90} label="hello" />
      <ProgressBar size="9" value={90} label="hello" />
    </Flex>
  )
}

Color

Default

p

Type

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

export const ProgressColor = () => {
  return (
    <Flex direction="col" gap="6">
      <ProgressBar color="d" value={90} showValue label="hello" />
      <ProgressBar color="su" value={90} showValue label="hello" />
      <ProgressBar color="w" value={90} showValue label="hello" />
      <ProgressBar color="se" value={90} showValue label="hello" />
      <ProgressBar color="b" value={90} showValue label="hello" />
      <ProgressBar color="p" value={90} showValue label="hello" />
      <ProgressBar color="i" value={90} showValue label="hello" />
    </Flex>
  )
}

Corner

Default

2

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'
90%
90%
90%
90%
90%
90%
90%
import { Flex, ProgressBar } from '@pillar-ui/core'

export const ProgressCorner = () => {
  return (
    <Flex direction="col" gap="6">
      <ProgressBar label="Hello" value={90} corner="0" />
      <ProgressBar label="Hello" value={90} corner="1" />
      <ProgressBar label="Hello" value={90} corner="2" />
      <ProgressBar label="Hello" value={90} corner="3" />
      <ProgressBar label="Hello" value={90} corner="4" />
      <ProgressBar label="Hello" value={90} corner="5" />
      <ProgressBar label="Hello" value={90} corner="full" />
    </Flex>
  )
}

Min

50%
100%
100%
import { Flex, ProgressBar } from '@pillar-ui/core'

export const ProgressMin = () => {
  return (
    <Flex direction="col" gap="6">
      <ProgressBar value={50} min={0} label="hello" />
      <ProgressBar value={500} min={0} label="hello" />
      <ProgressBar value={250} min={-100} label="hello" />
    </Flex>
  )
}

Max

50%
100%
50%
120%
import { Flex, ProgressBar } from '@pillar-ui/core'

export const ProgressMax = () => {
  return (
    <Flex direction="col" gap="6">
      <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} showValue label="hello" />
    </Flex>
  )
}

ProgressBarStack

Size

import { ProgressBarStack, ProgressBarStackItem, Size } from '@pillar-ui/core'

function ProgressBarStackDemo({ size }: { size: Size }) {
  return (
    <ProgressBarStack size={size} label="Nice to meet you">
      <ProgressBarStackItem label="CSS" color="d" value={30}>
        <button>CSS 30</button>
      </ProgressBarStackItem>
      <ProgressBarStackItem label="HTML" color="su" value={15}>
        <button>HTML 15%</button>
      </ProgressBarStackItem>
      <ProgressBarStackItem label="React" color="se" value={25}>
        <button>React 25%</button>
      </ProgressBarStackItem>
      <ProgressBarStackItem label="Node" color="p" value={15}>
        <button>Node 15%</button>
      </ProgressBarStackItem>
      <ProgressBarStackItem label="SCSS" color="w" value={15}>
        <button>SCSS 15%</button>
      </ProgressBarStackItem>
    </ProgressBarStack>
  )
}

export function ProgressBarStackSize({ size }: { size: Size }) {
  return (
    <div>
      <ProgressBarStackDemo size="1" />
      <ProgressBarStackDemo size="2" />
      <ProgressBarStackDemo size="3" />
      <ProgressBarStackDemo size="4" />
      <ProgressBarStackDemo size="5" />
      <ProgressBarStackDemo size="6" />
      <ProgressBarStackDemo size="7" />
      <ProgressBarStackDemo size="8" />
      <ProgressBarStackDemo size="9" />
    </div>
  )
}

previous

ProgressCricle

next

Radio