Skip to content

dash

Animated
typevaluesdefault
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 circumference

Example

js
<template>
  <ve-progress dash="strict 60 0.6" :progress="50"/>
</template>

Released under the MIT License.