Skip to content
NewService Map: 30 components for hosts, ports and routes
<PxRing />ReactActions & feedbackFree

Progress ring

Circular pixel progress ring with the percentage counting up in its centre; it turns green and throws a few sparks when it reaches 100%.

View as Markdown
<PxRing />

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxRing />
Props
valuelive
sizelive
childrenlive
React
<PxRing value={72} size={120}>Weekly usage</PxRing>

Installation

pnpm dlx shadcn@latest add @lumesec/px-ring
First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-ring.json

Usage

px-ring-example.tsx
import { PxRing } from "@/components/lumesec/px-ring";

export function Example() {
  return <PxRing value={72}>Weekly usage</PxRing>;
}

Behaviour

A circular version with the percentage counting up in its centre. It turns green and throws a few sparks at 100%.

API reference

Props

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

valueTypenumber | null

Progress from 0 to 100, clamped; the ring animates to it. null or leaving it out shows a spinning arc.

sizeTypenumberDefault120

Diameter in pixels.

childrenTypeReact.ReactNode

Caption under the ring; it also labels the progress bar.

onCompleteType() => void

Called when the fill reaches 100%, and again each time the value drops below 100 and returns. Not called when the ring starts at 100.

Ref

ref points at the root HTMLDivElement.

Accessibility

  • The ring is a div with role="progressbar", aria-valuemin="0", aria-valuemax="100" and aria-valuenow, which is left out when indeterminate.
  • The canvas and the percentage inside it are aria-hidden; the number is the visible form of aria-valuenow.
  • With a caption the ring is labelled by it through aria-labelledby; without one its aria-label is "Progress".
  • There is no live region.
  • Reduced motion: the ring and the number jump to the value, no sparks fire at 100%, and the indeterminate arc holds still.

Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --lumesec, --lumesec-shine, --lumesec-success, --foreground and --muted-foreground.

Notes

  • The ring starts at the first value instead of filling up from 0.
  • The percentage is text in the mono font with tabular figures, 27% of size high, and counts along with the fill. It turns green at 100%; the indeterminate ring shows no number.

Related

<px-button>
Async buttonpx-buttonOpen Async button
<px-confirm>
Two-step deletepx-confirmOpen Two-step delete
<px-toaster>
Toastspx-toasterOpen Toasts
<px-progress>
Progress barpx-progressOpen Progress bar

Was this page helpful?