Visualizations

Progress Circle

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

import { ProgressCircle } from '@tremor/react';
export const ProgressCircleHero = () => (  <div className="mx-auto grid grid-cols-1 gap-12">    <div className="flex justify-center">      <ProgressCircle value={72} size="lg" />    </div>  </div>);

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

import { Card, ProgressCircle } from '@tremor/react';
export function ProgressCircleDoc() {  return (    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        ProgressCircle with custom radius and strokeWidth values      </p>      <Card className="mx-auto flex max-w-xl flex-wrap justify-center gap-8">        <ProgressCircle          value={72}          radius={25}          strokeWidth={6}          tooltip="radius: 25, strokeWidth: 6"        />        <ProgressCircle          value={72}          radius={50}          strokeWidth={8}          tooltip="radius: 50, strokeWidth: 8"        />        <ProgressCircle          value={72}          radius={40}          strokeWidth={10}          tooltip="radius: 40, strokeWidth: 10"        />        <ProgressCircle          value={72}          radius={16}          strokeWidth={4}          tooltip="radius: 16, strokeWidth: 4"        />        <ProgressCircle          value={72}          radius={45}          strokeWidth={5}          tooltip="radius: 45, strokeWidth: 5"        />      </Card>    </div>  );}

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

import { Card, ProgressCircle } from '@tremor/react';
export function ProgressCircleUsageExample() {  return (    <div className="space-y-10">      <div className="space-y-3">        <p className="text-center font-mono text-sm text-slate-500">          Without children        </p>        <Card className="mx-auto max-w-sm">          <div className="flex justify-start space-x-5 items-center">            <ProgressCircle value={75} size="md" />            <div>              <p className="text-tremor-default text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">                $340/$450 (75%)              </p>              <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">                Spend management control              </p>            </div>          </div>        </Card>      </div>      <div className="space-y-3">        <p className="text-center font-mono text-sm text-slate-500">          Progress value as children        </p>        <Card className="mx-auto max-w-sm">          <div className="flex justify-start space-x-5 items-center">            <ProgressCircle value={75} size="md">              <span className="text-xs font-medium text-slate-700">75%</span>            </ProgressCircle>            <div>              <p className="text-tremor-default text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">                $340/$450 (75%)              </p>              <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">                Spend management control              </p>            </div>          </div>        </Card>      </div>      <div className="space-y-3">        <p className="text-center font-mono text-sm text-slate-500">          Avatar as children        </p>        <Card className="mx-auto max-w-sm">          <div className="flex justify-center space-x-5 items-center">            <ProgressCircle value={75} size="md" color="indigo">              <span className="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-sm font-medium text-indigo-500">                SV              </span>            </ProgressCircle>            <ProgressCircle value={75} size="md" color="violet">              <span className="flex h-12 w-12 items-center justify-center rounded-full bg-violet-100 text-sm font-medium text-violet-500">                CK              </span>            </ProgressCircle>            <ProgressCircle value={75} size="md" color="fuchsia">              <span className="flex h-12 w-12 items-center justify-center rounded-full bg-fuchsia-100 text-sm font-medium text-fuchsia-500">                AM              </span>            </ProgressCircle>          </div>        </Card>      </div>    </div>  );}

ProgressCircle sizes

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

xl.

import { Card, Flex, ProgressCircle, Text } from '@tremor/react';
export function ProgressCircleUsageExample() {  return (    <div className="space-y-10">      <div className="space-y-3">        <p className="text-center font-mono text-sm text-slate-500">          Without children        </p>        <Card className="mx-auto max-w-sm">          <Flex className="space-x-5" justifyContent="start">            <ProgressCircle value={75} size="md" />            <div>              <Text className="font-medium text-slate-700">$340/$450 (75%)</Text>              <Text>Spend management control</Text>            </div>          </Flex>        </Card>      </div>      <div className="space-y-3">        <p className="text-center font-mono text-sm text-slate-500">          Progress value as children        </p>        <Card className="mx-auto max-w-sm">          <Flex className="space-x-5" justifyContent="start">            <ProgressCircle value={75} size="md">              <span className="text-xs font-medium text-slate-700">75%</span>            </ProgressCircle>            <div>              <Text className="font-medium text-slate-700">$340/$450</Text>              <Text>Spend management control</Text>            </div>          </Flex>        </Card>      </div>      <div className="space-y-3">        <p className="text-center font-mono text-sm text-slate-500">          Avatar as children        </p>        <Card className="mx-auto max-w-sm">          <Flex className="space-x-5" justifyContent="center">            <ProgressCircle value={75} size="md" color="indigo">              <span className="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-sm font-medium text-indigo-500">                SV              </span>            </ProgressCircle>            <ProgressCircle value={75} size="md" color="violet">              <span className="flex h-12 w-12 items-center justify-center rounded-full bg-violet-100 text-sm font-medium text-violet-500">                CK              </span>            </ProgressCircle>            <ProgressCircle value={75} size="md" color="fuchsia">              <span className="flex h-12 w-12 items-center justify-center rounded-full bg-fuchsia-100 text-sm font-medium text-fuchsia-500">                AM              </span>            </ProgressCircle>          </Flex>        </Card>      </div>    </div>  );}

Theming

ProgressCircle

Element	Theme Token
Background color colorstremor-brand-muted	colorstremor-brand-muted
Progress color colorstremor-brand-DEFAULT	colorstremor-brand-DEFAULT

API Reference: ProgressCircle

client component

value: Sets the value of the progress indicator.

size: Set size of the progress circle.

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

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

color: Sets the color of the Circle and the bar background.

tooltip: Set a tooltip on hover.

showAnimation: Sets an animation to the chart when value changes.