Circle Progress Bar

Fully customizable Circle Progress Bar with animated data. Vye.js + Nuxt 3 + TailwindCSS

0 %

Set your own animation duration and delay

0 %

Delay: 0 (default)Duration: 1000ms (default)

0 %

Delay: 500msDuration: 300ms

0 %

Delay: 0Duration: 800ms

0 %

Delay: 0Duration: 2000ms

Set decimal precision

0 %

Precision: 0 (default)

0.0 %

Precision: 1

0.00 %

Precision: 2

Format text with tailwind classes

0 %

Class: 'text-lg' (default)

0 %

Classes: 'text-sm font-bold'

0 %

Classes: 'italic text-red-400 hover:scale-150 transition-all duration-500'

Create your own layout

With all available props like radius, progressRadius, cx, cy, thicknes, progressThickness, color, progressColor, progressCx, progressCy, containerWidth and containerHeight you can create your own layout with an ease. See few examples below

0.00 %

Props:
:text-layout="'text-sm font-bold'"
:decimal-precision="2"
:radius="40"
:progress-radius="35"

0.00 %

Props:
:text-layout="'text-sm font-bold'"
:decimal-precision="2"
:radius="75"
:container-width="'w-40'"
:container-height="'h-40'"
:cx="80"
:cy="80"
:progress-cx="80"
:progress-cy="80"
:progress-thickness="16"
:progress-radius="80"

0.00 %

Props:
:text-layout="'text-sm font-bold'"
:decimal-precision="2"
:progress-thickness="50"
:radius="40"
:progress-radius="40"
:progress-color="'text-red-400'"

0.00 %

Props:
:text-layout="'text-sm font-bold'"
:decimal-precision="2"
:thickness="0"
:progress-thickness="80"
:radius="40"
:progress-radius="40"
:progress-color="'text-gray-400'"

Go to: GitHub Repository