# ProgressBar **Category**: react **URL**: https://heroui.com/en/docs/react/components/progress-bar **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/en/react/components/(feedback)/progress-bar.mdx > A progress bar shows either determinate or indeterminate progress of an operation over time. *** ## Usage ```tsx import { ProgressBar, Label } from '@heroui/react'; ``` ```tsx import {Label, ProgressBar} from "@heroui/react"; export function Basic() { return ( ); } ``` ## Anatomy ```tsx import { ProgressBar, Label } from '@heroui/react'; export default () => ( ); ``` ## Examples ### Sizes ```tsx import {Label, ProgressBar} from "@heroui/react"; export function Sizes() { return (
); } ``` ### Colors ```tsx import {Label, ProgressBar} from "@heroui/react"; export function Colors() { return (
); } ``` ### Without Label When no visible label is needed, use `aria-label` for accessibility. ```tsx import {ProgressBar} from "@heroui/react"; export function WithoutLabel() { return ( ); } ``` ### Indeterminate Use `isIndeterminate` when progress cannot be determined. ```tsx import {Label, ProgressBar} from "@heroui/react"; export function Indeterminate() { return ( ); } ``` ### Custom Value Scale Use `minValue`, `maxValue`, and `formatOptions` to customize the value range and display format. ```tsx "use client"; import {Label, ListBox, NumberField, ProgressBar, Select, Separator} from "@heroui/react"; import {useState} from "react"; const formatStyleOptions: {label: string; value: string}[] = [ {label: "Currency", value: "currency"}, {label: "Percent", value: "percent"}, {label: "Decimal", value: "decimal"}, {label: "Unit", value: "unit"}, ]; const formatOptionsMap: Record = { currency: {currency: "USD", style: "currency"}, decimal: {style: "decimal"}, percent: {style: "percent"}, unit: {style: "unit", unit: "mile"}, }; export function CustomValue() { const [value, setValue] = useState(750); const [minValue, setMinValue] = useState(0); const [maxValue, setMaxValue] = useState(1000); const [format, setFormat] = useState("percent"); return (
setValue(v)} > { setMinValue(v); if (value < v) setValue(v); }} > { setMaxValue(v); if (value > v) setValue(v); }} >
); } ``` ## Customization ### Tailwind CSS ```tsx import {Label, ProgressBar} from "@heroui/react"; export function CustomStyles() { return ( ); } ``` ### Global CSS To customize the ProgressBar component classes, you can use the `@layer components` directive. [Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes). ```css @layer components { .progress-bar { @apply w-full gap-2; } .progress-bar__track { @apply h-3 rounded-full; } .progress-bar__fill { @apply rounded-full; } } ``` ## Styling Reference HeroUI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize. ### CSS Classes The ProgressBar component uses these CSS classes ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/progress-bar.css)): #### Base & Element Classes [!toc] - `.progress-bar` - Base container (grid layout) - `.progress-bar__output` - Value text display - `.progress-bar__track` - Track background - `.progress-bar__fill` - Filled portion of the track #### Size Classes [!toc] - `.progress-bar--sm` - Small size variant (thinner track) - `.progress-bar--md` - Medium size variant (default) - `.progress-bar--lg` - Large size variant (thicker track) #### Color Classes [!toc] - `.progress-bar--default` - Default color variant - `.progress-bar--accent` - Accent color variant - `.progress-bar--success` - Success color variant - `.progress-bar--warning` - Warning color variant - `.progress-bar--danger` - Danger color variant ## API Reference ### ProgressBar Inherits from [React Aria ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html). | Prop | Type | Default | Description | |------|------|---------|-------------| | `value` | `number` | `0` | The current value | | `minValue` | `number` | `0` | The minimum value | | `maxValue` | `number` | `100` | The maximum value | | `isIndeterminate` | `boolean` | `false` | Whether progress is indeterminate | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size of the progress track | | `color` | `"default" \| "accent" \| "success" \| "warning" \| "danger"` | `"accent"` | Color of the fill bar | | `formatOptions` | `Intl.NumberFormatOptions` | `{style: 'percent'}` | Number format for the value display | | `valueLabel` | `ReactNode` | - | Custom value label content | | `children` | `ReactNode \| (values: ProgressBarRenderProps) => ReactNode` | - | Content or render prop | ### Render Props When using the render prop pattern, these values are provided: | Prop | Type | Description | |------|------|-------------| | `percentage` | `number` | The percentage of the progress (0-100) | | `valueText` | `string` | The formatted value text | | `isIndeterminate` | `boolean` | Whether progress is indeterminate | ## Related Components