- Dashboard
My Library
- Base Components
- Base Pages
- My Library
- Ag Grid Table Page
Metronic Components
- Vue Bootstrap
- Vuetify
Metronic Custom
- Error Pages
- Wizard
Quick Actions
23 tasks pending
System Messages
Notifications
Another purpose persuade Due in 2 Days
+28% Would be to people Due in 2 Days
+50% Purpose would be to persuade Due in 2 Days
-27% The best product Due in 2 Days
+8% 5 new user generated report
Reports based on sales
2 new items submited
by Grog John
79 PSD files generated
Reports based on sales
$2900 worth producucts sold
Total 234 items
4.5h-avarage response time
Fostest is Barry
3 Defence alerts
40% less alerts thar last week
Avarage 4 blog posts per author
Most posted 12 time
16 authors joined last week
9 photodrapehrs, 7 designer
2 new items have been submited
by Grog John
2.8 GB-total downloads size
Mostly PSD end AL concepts
$2900 worth producucts sold
Total 234 items
7 new user generated report
Reports based on sales
4.5h-avarage response time
Fostest is Barry
Progress
- Vue Bootstrap
- Progress
Progress Use our custom progress component for displaying simple or complex progress bars, featuring support for horizontally stacked bars, animated backgrounds, and text labels. See documentation.
Progress
<div>
<b-progress :value="value" :max="max" show-progress animated></b-progress>
<b-progress class="mt-2" :max="max" show-value>
<b-progress-bar :value="value * (6 / 10)" variant="success"></b-progress-bar>
<b-progress-bar :value="value * (2.5 / 10)" variant="warning"></b-progress-bar>
<b-progress-bar :value="value * (1.5 / 10)" variant="danger"></b-progress-bar>
</b-progress>
<b-button class="mt-3" @click="randomValue">Click me</b-button>
</div>export default {
data() {
return {
value: 45,
max: 100
}
},
methods: {
randomValue() {
this.value = Math.random() * this.max
}
}
}45
27
11
7
Labels
<div>
<h5>No label</h5>
<b-progress :value="value" :max="max" class="mb-3"></b-progress>
<h5>Value label</h5>
<b-progress :value="value" :max="max" show-value class="mb-3"></b-progress>
<h5>Progress label</h5>
<b-progress :value="value" :max="max" show-progress class="mb-3"></b-progress>
<h5>Value label with precision</h5>
<b-progress :value="value" :max="max" :precision="2" show-value class="mb-3"></b-progress>
<h5>Progress label with precision</h5>
<b-progress :value="value" :max="max" :precision="2" show-progress class="mb-3"></b-progress>
</div>export default {
data() {
return {
value: 33.333333333,
max: 50
}
}
} Add labels to your progress bars by either enabling show-progress (percentage of max) or show-value for the current absolute value. You may also set the precision (number of digits after the decimal) via the precision prop (default is 0digits after the decimal).
No label
Value label
33
Progress label
67
Value label with precision
33.33
Progress label with precision
66.67
Custom progress label
<div>
<h5>Custom label via default slot</h5>
<b-progress :max="max" height="2rem">
<b-progress-bar :value="value">
Progress: <strong>{{ value.toFixed(2) }} / {{ max }}</strong>
</b-progress-bar>
</b-progress>
<h5 class="mt-3">Custom label via property</h5>
<b-progress :max="max">
<b-progress-bar :value="value" :label="`${((value / max) * 100).toFixed(2)}%`"></b-progress-bar>
</b-progress>
<h5 class="mt-3">Custom label via property (HTML support)</h5>
<b-progress :max="max">
<b-progress-bar :value="value" :label-html="`<del>${value}</del>`"></b-progress-bar>
</b-progress>
</div>export default {
data() {
return {
value: 33.333333333,
max: 50
}
}
} Need more control over the label? Provide your own label by using the default slot within a <b-progress-bar> sub-component, or by using the label or label-html property on <b-progress-bar>:
Custom label via default slot
Progress: 33.33 / 50
Custom label via property
66.67%
Custom label via property (HTML support)
Width and height
<div>
<h5>Default width</h5>
<b-progress :value="value" class="mb-3"></b-progress>
<h5>Custom widths</h5>
<b-progress :value="value" class="w-75 mb-2"></b-progress>
<b-progress :value="value" class="w-50 mb-2"></b-progress>
<b-progress :value="value" class="w-25"></b-progress>
</div>export default {
data() {
return {
value: 75
}
}
}Default width
Custom widths
Solid background variants
<div>
<div v-for="bar in bars" class="row mb-1">
<div class="col-sm-2">{{ bar.variant }}:</div>
<div class="col-sm-10 pt-1">
<b-progress :value="bar.value" :variant="bar.variant" :key="bar.variant"></b-progress>
</div>
</div>
</div>export default {
data() {
return {
bars: [
{ variant: 'success', value: 75 },
{ variant: 'info', value: 75 },
{ variant: 'warning', value: 75 },
{ variant: 'danger', value: 75 },
{ variant: 'primary', value: 75 },
{ variant: 'secondary', value: 75 },
{ variant: 'dark', value: 75 }
],
timer: null
}
},
mounted() {
this.timer = setInterval(() => {
this.bars.forEach(bar => (bar.value = 25 + Math.random() * 75))
}, 2000)
},
beforeDestroy() {
clearInterval(this.timer)
this.timer = null
}
}success:
info:
warning:
danger:
primary:
secondary:
dark: