ProgressCircleNew

Import

import { ProgressCircle } from '@heroui/react';

Usage

import {ProgressCircle} from "@heroui/react";

export function Basic() {
  return (
    <ProgressCircle aria-label="Loading" value={60}>

Anatomy

import { ProgressCircle } from '@heroui/react';

export default () => (
  <ProgressCircle aria-label="Loading" value={60}>
    <ProgressCircle.Track>
      <ProgressCircle.TrackCircle />
      <ProgressCircle.FillCircle />
    </ProgressCircle.Track>
  </ProgressCircle>
);

Sizes

import {ProgressCircle} from "@heroui/react";

export function Sizes() {
  return (
    <div className="flex items-center gap-6">

Colors

import {ProgressCircle} from "@heroui/react";

export function Colors() {
  return (
    <div className="flex items-center gap-6">

Indeterminate

Use isIndeterminate when progress cannot be determined.

import {ProgressCircle} from "@heroui/react";

export function Indeterminate() {
  return (
    <ProgressCircle isIndeterminate aria-label="Loading">

With Label

import {Label, ProgressCircle} from "@heroui/react";

export function WithLabel() {
  return (
    <div className="flex items-center gap-3">

Custom SVG Props

Since each part is a composable component, you can override SVG attributes like strokeWidth, r, cx, cy, and viewBox directly.

import {ProgressCircle} from "@heroui/react";

export function CustomSvg() {
  return (
    <div className="flex items-end gap-6">

Styling

Passing Tailwind CSS classes

You can customize individual ProgressCircle parts:

import { ProgressCircle } from '@heroui/react';

function CustomProgressCircle() {
  return (
    <ProgressCircle aria-label="Loading" value={60}>
      <ProgressCircle.Track>
        <ProgressCircle.TrackCircle />
        <ProgressCircle.FillCircle className="stroke-purple-500" />
      </ProgressCircle.Track>
    </ProgressCircle>
  );
}

Customizing the component classes

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

@layer components {
  .progress-circle {
    @apply inline-flex;
  }

  .progress-circle__track {
    @apply size-12;
  }

  .progress-circle__fill-circle {
    stroke: purple;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ProgressCircle component uses these CSS classes (View source styles):

Base & Element Classes

• .progress-circle - Base container
• .progress-circle__track - SVG element
• .progress-circle__track-circle - Background circle
• .progress-circle__fill-circle - Progress arc

Size Classes

• .progress-circle--sm - Small size variant
• .progress-circle--md - Medium size variant (default)
• .progress-circle--lg - Large size variant

Color Classes

• .progress-circle--default - Default color variant
• .progress-circle--accent - Accent color variant
• .progress-circle--success - Success color variant
• .progress-circle--warning - Warning color variant
• .progress-circle--danger - Danger color variant

API Reference

ProgressCircle Props

Inherits from React Aria ProgressBar.

ProgressBarRenderProps

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