Progress

SProgress is a progress indicator built on Reka UI (role="progressbar", correct aria-valuenow/aria-valuemax). It supports variants, sizes and an indeterminate mode (without value).

Value and variants

<template>
  <SProgress
    :value="60"
    variant="positive"
    label="Uploading"
  />
</template>

Sizes

<template>
  <SProgress
    :value="50"
    size="sm"
  />
  <SProgress
    :value="50"
    size="lg"
  />
</template>

Indeterminate progress

Without value the bar is animated (for example, while the upload size is still unknown).

<template>
  <SProgress label="Uploading" />
</template>

Custom maximum

The max prop sets the value that corresponds to 100% of the bar. Here 120 out of 200 is 60% filled.

<template>
  <SProgress
    :value="120"
    :max="200"
    label="120 of 200"
  />
</template>

Color

The color prop sets the fill color from the palette and overrides the variant color.

<template>
  <SProgress
    :value="65"
    color="indigo"
  />
</template>

API

Props

Name	Type	Default	Description
value	null | number	null	Current value. null or unset means indeterminate progress (animated).
max	number	100	Maximum value (100% of the scale).
size	"md" | "sm" | "lg"	"md"	Bar thickness: sm/md/lg.
variant	| "primary" | "positive" | "negative" | "warning"	"primary"	Fill color variant.
color	string	undefined	Accent color: a name from the palette (primary/teal/teal-10). Overrides the variant color.
label	string	undefined	Accessible name (aria-label) when there is no visible label.