Progress Ring Demo

1"use client"
2 
3import * as React from "react"
4 
5import { ProgressRing } from "@/registry/loomui/progress-ring"
6 
7const STOPS = [20, 64, 38, 92, 12]
8 
9export default function ProgressRingDemo() {
10  const [index, setIndex] = React.useState(0)
11 
12  React.useEffect(() => {
13    const timer = window.setInterval(
14      () => setIndex((current) => (current + 1) % STOPS.length),
15      1800
16    )
17    return () => window.clearInterval(timer)
18  }, [])
19 
20  return (
21    <div className="flex flex-col items-center gap-4">
22      <ProgressRing value={STOPS[index]} label="Threads wound" />
23      <p className="text-muted-foreground text-xs">
24        It never stops to start again.
25      </p>
26    </div>
27  )
28}