The AnimatedCircularProgress component is a high-performance SVG-based radial progress indicator. It features smooth physics-based transitions, pre-configured gradient color presets (Cyber, Emerald, Ember, Sunset), and an animated center count ticker that counts up/down fluidly whenever the target value updates.
Live Preview
Live SimulationInteractive Dashboard Widget
CPU CORE
0%
Loadadjust
RAM
0%
Memoryadjust
STORAGE
0%
Usedadjust
NETWORK
0%
Bandwidthadjust
Installation
npx kinetic-ui-cli@latest add animated-circular-progressUse Cases
Performance Dashboard Metric
Use multiple gauges side-by-side inside grid containers to present core vitals or performance metrics:
import { AnimatedCircularProgress } from '@/components/creative/animated-circular-progress';
export function SystemMonitor() {
return (
<div className="p-6 bg-zinc-950 border border-zinc-900 rounded-2xl flex items-center justify-between gap-6 max-w-lg">
<div className="flex flex-col gap-1">
<h4 className="text-sm font-bold text-white font-mono uppercase tracking-wider">System Core</h4>
<p className="text-zinc-500 text-xs">Vitals are operating within acceptable thresholds.</p>
</div>
<div className="flex gap-4">
<AnimatedCircularProgress value={24} theme="emerald" size={90} strokeWidth={6} label="CPU" />
<AnimatedCircularProgress value={58} theme="cyber" size={90} strokeWidth={6} label="RAM" />
</div>
</div>
);
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { AnimatedCircularProgress } from "@/components/creative/animated-circular-progress";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { AnimatedCircularProgress } from "@/components/creative/animated-circular-progress";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<AnimatedCircularProgress
value{10}
size{10}
strokeWidth{10}
/>
</div>
);
}