Progress - Chakra Ui

Usage

tsx

import { Progress } from "@chakra-ui/react"

tsx

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

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

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

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

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

Use the info prop to add a tooltip to the progress bar.

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

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

Set the animated prop to true to animate the stripes.

Here's how to create a closed component using the Progress component.

Explore the Progress component parts interactively. Click on parts in the sidebar to highlight them in the preview.