ProgressBar-DEMO
vue
<fv-ProgressBar>
</fv-ProgressBar>1
2
2
Default ProgressBar
vue
<fv-ProgressBar v-model="percent[0]">
</fv-ProgressBar>1
2
2
Indeterminate ProgressBar
vue
<fv-ProgressBar loading="true">
</fv-ProgressBar>1
2
2
ProgressBar Disabled
- Default
vue
<fv-ProgressBar v-model="percent[1]" disabled>
</fv-ProgressBar>1
2
2
- Indeterminate
vue
<fv-ProgressBar loading="true" disabled>
</fv-ProgressBar>1
2
2
ProgressBar Custom Style
- Custom Foreground
vue
<fv-ProgressBar v-model="percent[2]" foreground="rgba(0,204,153,1)">
</fv-ProgressBar>1
2
2
- Custom Background
vue
<fv-ProgressBar v-model="percent[3]" background="rgba(0,204,153,0.6)">
</fv-ProgressBar>1
2
2
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| modelValue | number | No | 0 | Progressbar value |
| loading | boolean | No | false | Is progressbar indeterminate |
| foreground | string | No | '' | |
| background | string | No | '' | |
| borderRadius | number | No | 2 | |
| disabled | boolean | No | false | |
| theme | string | No | 'global' | See the ProgressBar theme option. |
| lang | string | No | "global" | See the ProgressBar lang option. |
Events
| Event | Arguments | Description |
|---|---|---|
| progress-change | percent | |
| progress-finished | percent |