progress
Animated| type | values | default |
|---|---|---|
| Number | [-100, 100] |
The progress property takes a Number value in the range [-100, 100] and defines the filled area from the progress circle line in percent. By default, progress is shown as the legend in the middle of the circle.
progress is animated and counts up or down on any value changes with duration defined in animation.duration property.
A negative value can be used to fill the progress line counterclockwise. Alternatively, the same effect can be achieved with the reverse property.
Progress and Legend
The progress is always used to fill the progress circle line, it should always be in the range [-100, 100] and invalid Numbers lead to noData state. If you want to customize and style what the circle legend displays, you can use the legend property, also take a look at legendFormatter or the default slot.
If legend is defined, the progress will not be displayed as the circle legend.
Usage: 📜
<ve-progress :progress="50" />Basic Example
<ve-progress :progress="50" />