CircularProgress

Ring progress, determinate or spinning

A gauge — round because a gauge is round, one of the three deliberate circles in the system (with the radio and the knob). Pass value for a determinate ring; omit it and the arc spins. Under prefers-reduced-motion it spins at half speed rather than stopping: a loader that stops reads as finished.

Use it where a percentage matters and space is square — a tile, an upload row, a card corner. For a task with room across the page, Progress is the linear one; for "busy" with no percentage, Spinner is smaller and cheaper. showValue puts the number in the ring; it's legible from size 48 up (the text is 26% of the size), so below that put the number beside it. format or the default slot ({ value, percent }) changes the text; format also becomes aria-valuetext, so a screen reader hears "3 of 5 files" rather than "3". Give every ring a label.

Basic

35%80%

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessCircularProgress } from "blessing-ui";
const v = ref(35);
</script>

<template>
  <div class="row" style="gap: 24px">
    <BlessCircularProgress :value="v" show-value label="Upload" />
    <BlessCircularProgress
      :value="80"
      color="success"
      :size="64"
      :thickness="6"
      show-value
      label="Storage"
    />
    <BlessCircularProgress :value="20" color="danger" :size="32" :thickness="3" label="Battery" />
    <BlessCircularProgress label="Loading" />
    <BlessButton size="sm" @click="v = (v + 15) % 101">+15</BlessButton>
  </div>
</template>

Usage

import { BlessCircularProgress } from "blessing-ui";

API

Props

Name	Type	Default	Description
value	number	—	omit for indeterminate
max	number	100
size	number	48
thickness	number	4
color	"text" | "accent" | "danger" | "warning" | "success" | "info"	"accent"
label	string	—
showValue	boolean	false
format	((v: number) => string)	—

Slots

Name	Scope	Description
default	{ value: number; percent: number; }