Progress Bar

The Progress Bar component visually represents the progress of a task or process, allowing users to track completion at a glance. It supports different sizes and an optional label for enhanced clarity.

Basic Usage

25%

<template>
  <spr-progress-bar :value="progressValue" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

Size

50%

75%

100%

<template>
  <spr-progress-bar :value="50" size="xs" />
  <spr-progress-bar :value="75" size="sm" />
  <spr-progress-bar :value="100" size="lg" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

Label

100%

<template>
  <spr-progress-bar :value="100" size="lg" :label="true" />
  <spr-progress-bar :value="100" size="lg" :label="false" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

API Reference

Props

Name	Description	Type	Default
value	The current progress value. This determines how much of the progress bar is filled. The value is calculated as a percentage of the max value.	number	0
size	Defines the height of the progress bar. Options include: xs: Extra small (4px height) sm: Small (8px height) lg: Large (12px height)	'xs' | 'sm' | 'lg'	'lg'
max	The maximum value for the progress bar. The value prop is calculated as a percentage of this number. Must be between 1 and 100.	number	100
label	When set to true, displays a percentage label below the progress bar. The label shows the calculated percentage based on value and max.	boolean	true