Animated Circular Progress Bar

PreviewCode

0

@/demos/AnimatedCircularProgressBarDemo.tsx

import { createSignal, onCleanup, onMount } from 'solid-js'

import { AnimatedCircularProgressBar } from '@/registry/magicui/animated-circular-progress-bar'

function waitForPaint() {
  return new Promise<void>(resolve =>
    requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
  )
}

const bump = (prev: number) => (prev === 100 ? 0 : prev + 10)

export function AnimatedCircularProgressBarDemo() {
  const [value, setValue] = createSignal(0)

  onMount(() => {
    const ac = new AbortController()

    waitForPaint().then(() => {
      if (ac.signal.aborted)
        return
      setValue(bump)
      const timer = setInterval(setValue, 2000, bump)
      ac.signal.addEventListener('abort', () => clearInterval(timer))
    })

    onCleanup(() => ac.abort())
  })

  return (
    <AnimatedCircularProgressBar
      value={value()}
      gaugePrimaryColor="rgb(79 70 229)"
      gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
    />
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/animated-circular-progress-bar

bun

bunx shadcn@latest add @magicui-solid/animated-circular-progress-bar

yarn

yarn dlx shadcn@latest add @magicui-solid/animated-circular-progress-bar

npm

npx shadcn@latest add @magicui-solid/animated-circular-progress-bar

Usage

import { AnimatedCircularProgressBar } from "@/components/magicui/animated-circular-progress-bar"

<AnimatedCircularProgressBar />

Props

Prop	Type	Default	Description
class	string	-	The class name to be applied to the component
max	number	100	The maximum value of the gauge
min	number	0	The minimum value of the gauge
value	number	0	The current value of the gauge
gaugePrimaryColor	string	-	The primary color of the gauge
gaugeSecondaryColor	string	-	The secondary color of the gauge

Credits

• Credit to @luis-code

Original:

magicui.design/docs/components/animated-circular-progress-bar