Progres Bars

You can use the <d-progress> component to display simple or complex progress bars.

Basic Example


<d-progress :value="50" :max="100" />

<!-- progress-1.vue -->

Labels

You can add labels to your progress bars either by using the show-progress or show-value props.


<div>
    <!-- Showing Percentage Progress -->
    <d-progress theme="success" :value="50" :max="250" show-progress />

    <!-- Showing Value -->
    <d-progress :value="50" :max="250" show-value />
</div>

<!-- progress-2.vue -->

Precision

Using the precision prop you can specify the precision number of digits.


<d-progress :value="66.29123" :max="100" :precision="2" show-progress />

<!-- progress-3.vue -->

Multiple Progress Bars

Inside the <d-progress> component you can also stack multiple <d-progress-bar> components.


<d-progress :max="100" show-value>
    <d-progress-bar :value="50" theme="primary"></d-progress-bar>
        <d-progress-bar :value="30" theme="warning"></d-progress-bar>
        <d-progress-bar :value="10" theme="info"></d-progress-bar>
</d-progress>

<!-- progress-4.vue -->

Height

Using the height prop you can control the progress bar's height.


<div>
    <d-progress :max="100" :value="50" height="15px" class="mb-2" />
    <d-progress :max="100" :value="50" height="3px" />
</div>
<!-- progress-5.vue -->

Props

Prop	Description	Type	Default	Required
:theme	Theme color.	`String`	"primary"	False
:striped	Whether it should be striped, or not.	`Boolean`	false	False
:animated	Whether it should be animated, or not.	`Boolean`	false	False
:height	Height value.	`String`	null	False
:precision	Precision number of digits.	`Number`	0	False
:show-progress	Whether to show progress, or not.	`Boolean`	false	False
:show-value	Whether to show the value, or not.	`Boolean`	false	False
:max	The maximum value.	`Number`	100	False
:value	The value.	`Number`	0	False

Subcomponents

The following subcomponents are available for the <d-progress/> component:

<d-progress-bar/>

Props

Prop	Description	Type	Default	Required
:value	The value.	`Number`	0	False
:label	The label.	`String`		False
:max	The max value.	`Number`	null	False
:precision	Precision number of digits.	`Number`	null	False
:theme	Theme color.	`String`	null	False
:striped	Whether it should be striped, or not.	`Boolean`	null	False
:animated	Whether it should be animated, or not.	`Boolean`	null	False
:show-progress	Whether it should show the progress, or not.	`Boolean`	null	False
:show-value	Whether it should show the value, or not.	`Boolean`	null	False