legend

Animated

type	values	default
Number | String	any number with . or "," as decimals delimiter

The legend property can be any Number or String. While progress only accepts values between -100 and 100, legend lets you go beyond that range. You can even use "." or "," as a delimiter for simple formatting, or set an initial counter-placeholder like "0045.00". Just make sure it's a valid JavaScript Number.

Legend vs progress

The progress property is always required. When both legend and progress are defined, legend will take over as the displayed value inside the circle! How you calculate the progress based on the legend value is entirely up to you.

TIP

With legendFormatter or scoped slot, you can get creative with the circle legend and highly customize it. Want to hide the circle legend? Use the hideLegend property.

Usage: 📜

<ve-progress :legend="150" />
<ve-progress legend="020" />
<ve-progress legend="200,50" />

Examples

Here we imagine the legend to be a value between 0 and 4000. The progress is calculated as a percentage of the legend value

<template>
  <ve-progress :legend="2000" :progress="50"/>
</template>
<script setup>
  import { ref } from "vue";

  const maxLegendValue = 4000;
  const legend = ref(2000);
  
  const progress = computed(() => {
    return (legend.value * 100) / maxLegendValue;
  });
</script>

NormalLoadingDeterminateNo data

The following example clarifies the relationship between legend and progress. Imagine you need to display a product rating from 0 to 5 stars, and the rating is 3.5 stars. If you set the progress to 3.5, it will fill the circle to 3.5 percent, which is not what we want. Instead, we want to display the percentage of 5 as progress. This is where legend becomes very useful. In our component, we can calculate the progress as follows:

const rating = 3.5;
const progress = rating * 100 / 5; // the rating percentage

And then apply the values:

<ve-progress :progress="progress" :legend="rating" />

As a result, the rating can be displayed as a circle legend, and the progress will be calculated correctly:

<template>
  <ve-progress :legend="3" :progress="60"/>
</template>
<script setup>
  import { ref } from "vue";

  const maxStars = 5;
  const stars = ref(3);
  
  const progress = computed(() => {
    return (stars.value * 100) / maxStars;
  });
</script>

NormalLoadingDeterminateNo data

With the legend as a String, you can use custom decimal delimiters and easily format the displayed value:

<ve-progress :legend="3000" :progress="50" />
<ve-progress legend="20,50" :progress="50" />
<ve-progress legend="01000" :progress="50" />
<ve-progress legend="0050,51100" :progress="50" />
<ve-progress legend="0050.250" :progress="50" />

NormalLoadingDeterminateNo data