Progress ring

Shows the progress of a task in a circular indicator.

Uploading assets

progress-ring-basic-demo.tsx

"use client";import { ProgressRing } from "@/components/vip-ui/progress-ring";export function ProgressRingBasicDemo() {  return <ProgressRing label="Uploading assets" value={65} size="lg" />;}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-progress-ring.json

Known and unknown progress

Set showValue={false} to hide the value in the center.

Uploading

Connecting

progress-ring-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { ProgressRing } from "@/components/vip-ui/progress-ring";export function ProgressRingDemo() {  const [value, setValue] = useState(40);  return (    <div className="grid justify-items-center gap-4">      <div className="flex flex-wrap items-center justify-center gap-6 sm:gap-8">        <ProgressRing label="Uploading" value={value} size="lg" />        <ProgressRing          label="Connecting"          isIndeterminate          size="lg"          showValue={false}        />      </div>      <Button        variant="secondary"        size="sm"        onPress={() =>          setValue((current) => (current >= 100 ? 0 : current + 20))        }      >        {value >= 100 ? "Restart" : "Advance progress"}      </Button>    </div>  );}

Sizes

Small

Medium

Large

progress-ring-sizes-demo.tsx

"use client";import { ProgressRing } from "@/components/vip-ui/progress-ring";export function ProgressRingSizesDemo() {  return (    <div className="flex flex-wrap items-end justify-center gap-6 sm:gap-8">      <ProgressRing label="Small" value={30} size="sm" />      <ProgressRing label="Medium" value={55} />      <ProgressRing label="Large" value={80} size="lg" />    </div>  );}

Value label

Set valueLabel to replace the percentage. Screen readers hear the same text.

Setup steps

progress-ring-label-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { ProgressRing } from "@/components/vip-ui/progress-ring";const total = 5;export function ProgressRingLabelDemo() {  const [done, setDone] = useState(3);  return (    <div className="grid justify-items-center gap-4">      <ProgressRing        label="Setup steps"        value={done}        maxValue={total}        valueLabel={`${done} of ${total}`}        size="lg"      />      <Button        variant="secondary"        size="sm"        onPress={() =>          setDone((current) => (current >= total ? 0 : current + 1))        }      >        {done >= total ? "Restart" : "Complete a step"}      </Button>    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria ProgressBar (opens in a new tab).

label: stringRequired: Shows a visible label below the ring.
size: "sm" | "md" | "lg" = "md": Sets the diameter: 40, 64, or 96 pixels.
showValue: boolean = true: Shows the value in the center of the ring. Keep valueLabel short so it fits.