Options overview
The progress
is the only required property, and you are ready to go with just following line:
<ve-progress :progress="progress" />
Also make sure to check slots
Prop | Type | Values | Default |
---|---|---|---|
progress | Number | [-100, 100] | |
size | Number | >=0 | 200 |
line | String | "round | square | butt" | "round" |
thickness | Number | String | >=0 as Number or percent value as String | "5%" |
lineMode | String | "center | out | out-over | in | in-over | top | bottom [offset]" | "center" |
linePosition | String | "center | out | in [offset]" | "center" |
emptyLinePosition | String | "center | out | in [offset]" | "center" |
emptyThickness | Number | String | >=0 as Number or percent value as String | "5%" |
color | String | Object | any color as String or Object to specify gradient (see details) | "#3f79ff" |
colorFill | String | Object | same as color | "transparent" |
emptyColor | String | Object | same as color | "#e6e9f0" |
emptyColorFill | String | Object | same as color | "transparent" |
hideLegend | Boolean | true | |
legend | Number | String | any number, accepts a . or "," as decimals delimiter and simple formatting | |
legendFormatter | Function | Function that returns formatted value | |
animation | String | "default | rs | loop | reverse | bounce [duration delay]" | "default 1000 400" |
loading | Boolean | false | |
loader | Object | { [thickness, color, lineMode, line, opacity ]} | |
determinate | Boolean | false | |
nodata | Boolean | false | |
angle | Number | any Number | -90 |
fontSize | String | any valid CSS value | "1rem" |
fontColor | String | any valid CSS value | "gray" |
legendClass | String | any | |
dash | String | "[strict] count spacing" | |
half | Boolean | false | |
gap | Number | any Number that defines the gap between multiple circles in pixel | 0 |
dot | String | Number | Object | Accepts size, color and other styles as Number, descriptive string "size [color]" or object {size [, backgroundColor, widht, borderRadius ...]} | 0 |
reverse | Boolean | false | |
data | Array | defines multiple circles, takes as values Objects with almost all props defined above |