dash
Animated| type | values | default |
|---|---|---|
| String | "[strict] amount spacing" |
Descriptive string in the form "[strict] amount spacing" that adds a dashed empty progress line. This property offers an optional strict mode. In strict mode, you can define the exact number of dashes (amount) with the given relative spacing (spacing) as a number between 0 and 1. Without strict mode, the default behavior of the SVG stroke-dasharray property is used, where amount specifies the size of the dashes, the number of dashes is determined by the circle circumference. Both amount and spacing values are mandatory.
Usage: 📜
vue
<ve-progress dash="strict 60 0.5" /> - exact 60 dashes with 0.5 relative spacing
<ve-progress dash="10 10" /> - 10 pixels big dashes with 10 pixels spacing, the number of dashes depends on the empty circle circumferenceExample
js
<template>
<ve-progress dash="strict 60 0.6" :progress="50"/>
</template>