size
Animated| type | values | default |
|---|---|---|
| Number | >= 0 | 200 |
Defines the width and height of the circle in pixel. Specifically, the value defines the dimensions of the circle container, exact size of the circle circumference and diameter depends on the properties lineMode, thickness, emptyThickness and dot! The size property defines the absolut width and height the component will take on the page.
TIP
Check the lineMode, thickness, emptyThickness and dot properties to understand how the progress and empty lines behave depending on the different values. Also, by default the thickness and emptyThickness scale relatively to the size.
Usage: 📜
<ve-progress :size="200" />Basic Example
<template>
<ve-progress v-for="s in sizes" :size="s" :progress="50" :key="s">
<template #legend-caption>
<span>{{ s }}</span>
</template>
</ve-progress>
</template>
<script setup>
const sizes = [150, 120, 80, 60, 40];
</script>Size depending calculations
The following examples demonstrates that the size property determines the outer boundaries of the component. The internal calculations always adjust to the specified size, the circle lines always remain within the boundaries.