Progress | Park UI

Installation

npx @park-ui/cli@next add progress

Add Component

Copy the code snippet below into you components folder.

'use client'
import { Progress } from '@ark-ui/react/progress'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { progress } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(progress)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(Progress.Root, 'root')
export const RootProvider = withProvider(Progress.RootProvider, 'root')
export const Circle = withContext(Progress.Circle, 'circle')
export const CircleRange = withContext(Progress.CircleRange, 'circleRange')
export const CircleTrack = withContext(Progress.CircleTrack, 'circleTrack')
export const Label = withContext(Progress.Label, 'label')
export const Range = withContext(Progress.Range, 'range')
export const Track = withContext(Progress.Track, 'track')
export const ValueText = withContext(Progress.ValueText, 'valueText')
export const View = withContext(Progress.View, 'view')

Integrate Recipe

Integrate this recipe in to your Panda config.

import { progressAnatomy } from '@ark-ui/react/progress'
import { defineSlotRecipe } from '@pandacss/dev'

export const progress = defineSlotRecipe({
  slots: progressAnatomy.keys(),
  className: 'progress',
  base: {
    root: {
      textStyle: 'sm',
      position: 'relative',
    },
    track: {
      overflow: 'hidden',
      position: 'relative',
    },
    range: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      transitionProperty: 'width, height',
      transitionDuration: 'slow',
      height: '100%',
      bgColor: 'var(--track-color)',
      _indeterminate: {
        '--animate-from-x': '-40%',
        '--animate-to-x': '100%',
        position: 'absolute',
        willChange: 'left',
        minWidth: '50%',
        animation: 'position 1s ease infinite normal none running',
        backgroundImage: `linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)`,
      },
    },
    label: {
      display: 'inline-flex',
      fontWeight: 'medium',
      alignItems: 'center',
      gap: '1',
    },
    valueText: {
      textStyle: 'xs',
      lineHeight: '1',
      fontWeight: 'medium',
    },
  },

  variants: {
    variant: {
      solid: {
        track: {
          bgColor: 'gray.subtle.bg',
        },
        range: {
          bgColor: 'colorPalette.solid.bg',
          color: 'colorPalette.solid.fg',
        },
      },
      subtle: {
        track: {
          bgColor: 'colorPalette.subtle.bg.active',
        },
        range: {
          bgColor: 'colorPalette.solid.bg',
          color: 'colorPalette.solid.fg',
        },
      },
    },

    shape: {
      square: {},
      rounded: {
        track: {
          borderRadius: 'l1',
        },
      },
      full: {
        track: {
          borderRadius: 'full',
        },
      },
    },

    striped: {
      true: {
        range: {
          backgroundImage: `linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)`,
          backgroundSize: `var(--stripe-size) var(--stripe-size)`,
          '--stripe-size': '1rem',
          '--stripe-color': {
            _light: 'rgba(255, 255, 255, 0.3)',
            _dark: 'rgba(0, 0, 0, 0.3)',
          },
        },
      },
    },

    animated: {
      true: {
        range: {
          '--animate-from': 'var(--stripe-size)',
          animation: 'bg-position 1s linear infinite',
        },
      },
    },

    size: {
      xs: { track: { h: '1.5' } },
      sm: { track: { h: '2' } },
      md: { track: { h: '2.5' } },
      lg: { track: { h: '3' } },
      xl: { track: { h: '3.5' } },
    },
  },

  defaultVariants: {
    variant: 'solid',
    size: 'md',
    shape: 'rounded',
  },
})

Usage

import { Progress } from '@/components/ui'

<Progress.Root>
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
  <Progress.Label />
  <Progress.ValueText />
</Progress.Root>

Examples

Sizes

Use the size prop to change the size of the progress bar.

Variants

Use the variant prop to change the visual style of the progress bar.

Colors

Use the colorPalette prop to change the color of the progress bar.

Inline Label

Compose the Progress.Label and Progress.ValueText components to create an inline label for the progress bar.

Usage

42%

Indeterminate

Set the value to null to show an indeterminate progress bar.

Stripes

Set the striped prop to true to add stripes to the progress bar.

Animated Stripes

Set the animated prop to true to animate the stripes.

Closed Component

Here's how to setup the progress for a closed component composition.

import { forwardRef, type ReactNode } from 'react'
import { Progress as StyledProgress } from '@/components/ui'

interface ProgressProps extends StyledProgress.RootProps {
  showValueText?: boolean
  valueText?: ReactNode
  label?: ReactNode
}

export const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(props, ref) {
  const { showValueText, valueText, label, ...rest } = props
  return (
    <StyledProgress.Root {...rest} ref={ref}>
      {label && <StyledProgress.Label>{label}</StyledProgress.Label>}
      <StyledProgress.Track>
        <StyledProgress.Range />
      </StyledProgress.Track>
      {showValueText && <StyledProgress.ValueText>{valueText}</StyledProgress.ValueText>}
    </StyledProgress.Root>
  )
})

Props

Root

Prop	Default	Type
`variant`	`'solid'`	`'solid' \| 'subtle'`
`shape`	`'rounded'`	`'square' \| 'rounded' \| 'full'`
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`
`defaultValue`	`50`	`number` The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar.
`formatOptions`	`{ style: \percent\ }`	`NumberFormatOptions` The options to use for formatting the value.
`locale`	`\en-US\`	`string` The locale to use for formatting the value.
`max`	`100`	`number` The maximum allowed value of the progress bar.
`min`	`0`	`number` The minimum allowed value of the progress bar.
`orientation`	`\horizontal\`	`'horizontal' \| 'vertical'` The orientation of the element.
`striped`		`boolean`
`animated`		`boolean`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; track: string; label: string; circle: string }>` The ids of the elements in the progress bar. Useful for composition.
`onValueChange`		`(details: ValueChangeDetails) => void` Callback fired when the value changes.
`translations`		`IntlTranslations` The localized messages to use.
`value`		`number` The controlled value of the progress bar.

View

Prop	Default	Type
`state`*		`ProgressState`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.