Circular Progress

1function CircleProgress() {
2  const [p, setP] = React.useState(0);
3  React.useEffect(() => { const id = setInterval(() => setP(x => (x >= 100 ? 0 : x + 2)), 60); return () => clearInterval(id); }, []);
4  const r = 26, c = 2 * Math.PI * r;
5  return (
6    <div style={{position:'relative',width:72,height:72,fontFamily:'system-ui'}}>
7      <svg width="72" height="72" style={{transform:'rotate(-90deg)'}}>
8        <circle cx="36" cy="36" r={r} fill="none" stroke="rgba(255,255,255,.1)" strokeWidth="6" />
9        <circle cx="36" cy="36" r={r} fill="none" stroke="url(#g)" strokeWidth="6" strokeLinecap="round"
10          strokeDasharray={c} strokeDashoffset={c - (p/100)*c} />
11        <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#8b5cf6"/><stop offset="1" stopColor="#06b6d4"/></linearGradient></defs>
12      </svg>
13      <span style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontSize:14,fontWeight:600}}>{p}%</span>
14    </div>
15  );
16}