Progress

Shows how far a task with a known end has got, such as an import, an upload or a step in a process.

<script setup lang="ts">
import { FsProgress } from '@fivespark/ui'
</script>

<template>
  <FsProgress :value="42" label="Offertes importeren" class="w-full max-w-md" />
</template>

Usage

<script setup lang="ts">
import { FsProgress } from '@fivespark/ui'
</script>

<template>
  <FsProgress :value="42" label="Offertes importeren" />
</template>

value runs from 0 to max, which is 100 unless you set it, and label says what is progressing. There is no indeterminate state: when you do not know how far along it is, use Spinner. The bar is not announced as it changes, so tell people when the task has finished some other way, such as a Toast.

Examples

Custom text

valueText replaces the percentage with words that fit the task, like "3 van 12 bestanden" or "Stap 2 van 4".

<script setup lang="ts">
import { FsProgress } from '@fivespark/ui'

const bestanden = (value: number, max: number) => `${value} van ${max} bestanden`
</script>

<template>
  <FsProgress :value="3" :max="12" label="Bestanden uploaden" :value-text="bestanden" class="w-full max-w-md" />
</template>

Decimals

fractionDigits sets how many decimals the percentage shows.

<script setup lang="ts">
import { FsProgress } from '@fivespark/ui'
</script>

<template>
  <FsProgress :value="42.5" :fraction-digits="1" label="Planning verwerkt" class="w-full max-w-md" />
</template>

Label hidden

hideLabel keeps the label for screen readers only, for a bar in a row of text that already says what it is. The label stays required.

<script setup lang="ts">
import { FsProgress } from '@fivespark/ui'
</script>

<template>
  <div class="flex w-full max-w-md items-center justify-between gap-4">
    <span class="type-body">Order 1042</span>
    <FsProgress :value="75" label="Voortgang order 1042" hide-label class="w-40" />
  </div>
</template>

Complete

At max the bar is full.

<script setup lang="ts">
import { FsProgress } from '@fivespark/ui'
</script>

<template>
  <FsProgress :value="100" label="Offerte exporteren" class="w-full max-w-md" />
</template>

API Reference

FsProgress

Prop	Type	Default	Description
value	number	required	How far it has got, from 0 to `max`. Clamped.
max	number	100	The value when complete. Above 0.
label	string	required	What is progressing, such as "Offertes importeren". It names the bar; never the number.
hideLabel	boolean	false	Keeps the label as visually hidden text, for a table row that already names the bar.
fractionDigits	number	0	Decimals in the percentage, for a precise figure: 1 shows "42,5%". Cut off, never rounded up.
valueText	((value: number, max: number) => string)		Replaces the percentage, shown and read: "3 van 12 bestanden", "Stap 2 van 4".
hideValue	boolean	false	Only where text beside the bar already says the value.