ProgressBar

Import

import { ProgressBar, Label } from '@blakeui/react';

Usage

import {Label, ProgressBar} from "@blakeui/react";

export function Basic() {
  return (
    <ProgressBar aria-label="Loading" className="w-64" value={60}>

Anatomy

import { ProgressBar, Label } from '@blakeui/react';

export default () => (
  <ProgressBar value={60}>
    <Label>Loading</Label>
    <ProgressBar.Output />
    <ProgressBar.Track>
      <ProgressBar.Fill />
    </ProgressBar.Track>
  </ProgressBar>
);

Sizes

import {Label, ProgressBar} from "@blakeui/react";

export function Sizes() {
  return (
    <div className="flex w-64 flex-col gap-6">

Colors

import {Label, ProgressBar} from "@blakeui/react";

export function Colors() {
  return (
    <div className="flex w-64 flex-col gap-6">

Indeterminate

Use isIndeterminate when progress cannot be determined.

import {Label, ProgressBar} from "@blakeui/react";

export function Indeterminate() {
  return (
    <ProgressBar isIndeterminate aria-label="Loading" className="w-64">

Custom Value Scale

Use minValue, maxValue, and formatOptions to customize the value range and display format.

"use client";

import {Label, ListBox, NumberField, ProgressBar, Select, Separator} from "@blakeui/react";
import {useState} from "react";

Without Label

When no visible label is needed, use aria-label for accessibility.

import {ProgressBar} from "@blakeui/react";

export function WithoutLabel() {
  return (
    <ProgressBar aria-label="Loading progress" className="w-64" value={45}>

Styling

Passing Tailwind CSS classes

You can customize individual ProgressBar parts:

import { ProgressBar, Label } from '@blakeui/react';

function CustomProgressBar() {
  return (
    <ProgressBar value={60}>
      <Label>Loading</Label>
      <ProgressBar.Output />
      <ProgressBar.Track className="bg-purple-100 dark:bg-purple-900">
        <ProgressBar.Fill className="bg-purple-500" />
      </ProgressBar.Track>
    </ProgressBar>
  );
}

Customizing the component classes

To customize the ProgressBar component classes, you can use the @layer components directive.
Learn more.

A worked example is in Styling.

blakeUI follows the BEM 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):

Base & Element Classes

• .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

• .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

• .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 Props

Inherits from React Aria ProgressBar.

ProgressBarRenderProps

When using the render prop pattern, these values are provided: