progress
Animated: ✔️
type | values | default |
---|---|---|
Number | [-100, 100] |
Progress property takes a Number value in the range [-100, 100] (including decimals) and defines the filled area from 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 be always in the range [-100, 100] and not valid Numbers lead to noData
state. For advanced use cases please use legend
and take a look at legendFormatter
.
If legend
is defined the progress
will not be displayed as the circle legend.
Usage: 📜
<ve-progress :progress="50" />