ProgressCircle

Import

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

Usage

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

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

Anatomy

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

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

Sizes

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

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

Colors

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

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

Indeterminate

Use isIndeterminate when progress cannot be determined.

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

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

With Label

import {Label, ProgressCircle} from "@blakeui/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 "@blakeui/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 '@blakeui/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.

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 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: