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

Name	Description	Type	Default
value	Value of the progress bar	number	0
size	Defines the size of the progress bar. The accepted values are 'xs', 'sm' and 'lg'.	string	lg
max	Defines the max value of the progress bar	number	100
label	Shows the label for the progress bar	boolean	true