data
Animated: ✔️
| type | values | default |
|---|---|---|
| Array | [{ props }] |
The data property lets you define more complex chart-like progress circles. It is an array of objects with almost all documented properties that define multiple circles in one.
You can specify 2 or more circles as Objects in an array as data. Each circle can be individually configured using almost every available property. It is not necessary to specify all properties, they will be merged with global props, the circle specific props will overwrite the global. The circles are rendered inside each other.
Warning
Excluded props: lineMode, emptyThickness, legend. These properties will be ignored, if data is specified. Also, the legend of this circle remains hidden.
Gap
The gap property defines the distance between circles.
Usage 📜
<ve-progress :data="[{progress: 15, color: 'red'}, {progress: 30, color: 'blue'}]"/>
Examples
Like the following example demonstrates, almost any props can be specified for each circle that will override global props. Here we can see that yellow circle has its own gap property
Of course it is possible to specify dot or have a half circle
It also applies to dash, loader and animation properties
data enables us to create stunning loaders like these
It is also important to mention that no property in data Objects is required. We can create circles by just passing an array of empty objects. But (global) progress must still be set.
Even almost real charts can be created. But this requires tricky manual calculations The following example is for demonstration purposes only and should not be taken too seriously. For such use cases, appropriate chart libraries should be used