Skip to content

Circular progress

Alerts are used to show an inline alert or message.

Examples

Determinate circular progress

Code

vue
<template>
  <ProgressCircular
    :model-value="progress"
    class="w-12 h-12"
  />
</template>
<script setup lang="ts">
import { ProgressCircular } from '@/components/ui/progress-circular'

const progress = 75
</script>

Indeterminate circular progress

Code

vue
<template>
  <ProgressCircular
    class="w-12 h-12"
  />
</template>
<script setup lang="ts">
import { ProgressCircular } from '@/components/ui/progress-circular'
</script>