Visualizations

Progress Circle

Visual element to indicate progress, performance, or status represented in a circular shape.

Import ProgressCircle

Tremor exports one component for progress circle:

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

ProgressCircle

The ProgressCircleaccepts input values ranging from 0 to 100, where 100 represents 100 percent. If no data is available or if valueis equal to zero, the progress circle is not displayed, leaving only the background bar visible Besides pre-defined sizes like xs, sm, md, lgand xl, the radiusand strokeWidthprops allow to customize the size. Additionally, the component allows the embedding of children.

ProgressCircle with custom radius and strokeWidth values

Usage example ProgressCircle

Examples of different compositions with ProgressCircle component.

Without children

$340/$450 (75%)

Spend management control

Progress value as children

75%

$340/$450 (75%)

Spend management control

Avatar as children

SV
CK
AM

ProgressCircle sizes

There are five different sizes available: xs, sm, md, lg, and

xl.

xs

sm

md

lg

xl

Theming

ProgressCircle

Background color
colorstremor-brand-muted
Progress color
colorstremor-brand-DEFAULT

API Reference: ProgressCircle

client component
value
number
Sets the value of the progress indicator.
size
string

Default: md

Set size of the progress circle.
radius
number

Default: 32

Set radius of the progress circle. Overrides radius if a pre-defined size (e.g. size='sm') is selected.
strokeWidth
number

Default: 6

Set stroke width of the progress circle. Overrides stroke width if a pre-defined size (e.g. size='sm') is selected.
color
Color

Default: blue

Sets the color of the Circle and the bar background.
tooltip
string
Set a tooltip on hover.
showAnimation
boolean

Default: true

Sets an animation to the chart when value changes.