Progress Circle

Name: Nayan UI
Author: Nayan UI

A Progress Circle shows how far along a task is as a ring rather than a bar, which fits a tile, a button or a dense row where a full-width bar would not. Left without a value it spins as an indeterminate indicator.

Demo

Rendered live, with the same build of the library you install.

Colors and sizes:

Indeterminate:

Usage

Source

ProgressCircle.tsx

import { NProgressCircle } from '@nayan-ui/react';

const ProgressCircle = () => {
  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Colors and sizes:</h3>
      <div className="mb-5 flex flex-wrap items-center gap-5">
        <NProgressCircle value={25} aria-label="Upload" />
        <NProgressCircle value={60} color="success" size="lg" aria-label="Sync" />
        <NProgressCircle value={90} color="warning" size="sm" aria-label="Disk" />
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Indeterminate:</h3>
      <NProgressCircle isIndeterminate aria-label="Working" />
    </div>
  );
};

export default ProgressCircle;

Attributes

10 props

Name	Type	Default	Details
value	number	Optional	The value prop.
minValue	number	0	The minValue prop.
maxValue	number	100	The maxValue prop.
isIndeterminate	boolean	false	Omit `value` for an indeterminate circle.
color	'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'	'accent'	The color prop.
size	'sm' \| 'md' \| 'lg'	'md'	The size prop.
children	ReactNode	Optional	Rendered in the middle of the circle — a percentage, a count, an icon.
className	string	''	The className prop.
trackClassName	string	''	The trackClassName prop.
aria-label	string	'Progress'	The aria-label prop.