Progress

Bar, determinate or not

The linear one: a task with a known length and room across the page — an upload, a form's steps, a quota. Pass value (against max, default 100); omit it for an indeterminate bar that slides until you know more. showValue prints the percentage at the end of the head, or whatever format(value, max) returns — format is also what a screen reader hears ("42 of 128 MB"). Under prefers-reduced-motion the indeterminate bar stops sliding and fills the track at 40% opacity. When value reaches max the bar is done: it outgrows its track and leans past the end — the one place a progress bar is allowed to break its frame.

Always name it: a visible label, or at least label as the accessible name — a bar with no name is just a line. In a square space, CircularProgress; for the page-level "something's loading" line, LoadingBar; for parts of a whole, MeterGroup.

Basic

Upload35%

Synced

Battery

Download42 of 128 MB

Preparing

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

<template>
  <div class="col">
    <BlessProgress :value label="Upload" show-value />
    <BlessProgress :value="80" color="success" size="sm" label="Synced" />
    <BlessProgress :value="20" color="danger" size="lg" label="Battery" />
    <BlessProgress
      :value="42"
      :max="128"
      label="Download"
      show-value
      :format="(v, m) => `${v} of ${m} MB`"
    />
    <BlessProgress label="Preparing" />
    <div class="row">
      <BlessButton size="sm" @click="value = Math.min(100, value + 15)">+15</BlessButton>
      <BlessButton size="sm" variant="outline" @click="value = 0">Reset</BlessButton>
    </div>
  </div>
</template>

Usage

import { BlessProgress } from "blessing-ui";

API

Props

Name	Type	Default	Description
value	number	—	omit for indeterminate
max	number	100
label	string	—
showValue	boolean	—
color	"text" | "accent" | "danger" | "warning" | "success"	"accent"
size	"md" | "sm" | "lg"	"md"
format	((value: number, max: number) => string)	—	text for showValue; default is the percentage