GitHub55X

Progress Circular

Vue circular progress indicator for loading states and determinate completion percentages.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/progress-circular.json

Usage

      
      <script setup lang="ts">
import { Progress } from "@/components/ui/progress-circular";
</script>

<template>
  <Progress.Root :default-value="42">
    <Progress.CircleContainer>
      <Progress.Circle>
        <Progress.CircleTrack />
        <Progress.CircleRange />
      </Progress.Circle>
      <Progress.ValueText />
    </Progress.CircleContainer>
  </Progress.Root>
</template>

Composition

      
      Progress.Root
├── Progress.Label
├── Progress.CircleContainer
│   ├── Progress.Circle
│   │   ├── Progress.CircleTrack
│   │   └── Progress.CircleRange
│   └── Progress.ValueText
├── Progress.Context
├── Progress.RootProvider
├── Progress.Range
├── Progress.Track
└── Progress.View

Examples

Min and Max

By default, the maximum is 100. If that's not what you want, you can easily specify a different bound by changing the value of the max prop. You can do the same with the minimum value by setting the min prop.

For example, to show the user a progress from 10 to 30, you can use:

Indeterminate

The progress component is determinate by default, with the value and max set to 50 and 100 respectively. To render an indeterminate progress, you will have to set the value to null.

Label

Add a label to provide additional context for the progress indicator.

Root Provider

An alternative way to control the progress is to use the RootProvider component and the useProgress hook. This way you can access the state and methods from outside the component.

API

See Ark UI Progress - Circular docs for full props and examples.

PopoverProgress Linear