Progress

A bar that shows how much of a task is done, from 0 to 100%. It comes in three sizes, can show the percentage before the bar, and fills from the start of the line, so it follows the page's reading direction.

Installation

bash

npx @smicolon/fasla-ui@latest add progress

Run init once per project before adding components. See Installation.

Preview

Variants

Sizes

Percentage label

With showPercentage set to false, the bar shows no number, so give it an aria-label that says what it tracks. Screen readers announce that name with the value. See the example in Storybook.

Props

Prop	Type	Default	Description
`value`	`number`	`0`	How much is done, from `0` to `100`. Values outside the range are clamped.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Bar height and label size.
`showPercentage`	`boolean`	`true`	Shows the percentage before the bar.
`aria-label`	`string`	—	Names the progress bar for screen readers.
`getAriaValueText`	`(text, value) => string`	—	Returns the text screen readers hear for the value.
`locale`	`string`	`"en-US"`	Locale used to format the percentage.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { Progress } from "@/components/ui/progress"

export function UploadProgress({ value }: { value: number }) {
  return (
    <Progress
      value={value}
      size="md"
      aria-label="Uploading quarterly report"
    />
  )
}