ProgressBar

ProgressBar is a process status indicator.

Download #


npx volt-vue add ProgressBar

Import #


import ProgressBar from '@/volt/ProgressBar.vue';

Basic #

ProgressBar is used with the value property.

50%


<template>
    <div class="card">
        <ProgressBar :value="50"></ProgressBar>
    </div>
</template>

<script setup lang="ts">
import ProgressBar from '@/volt/ProgressBar.vue';
</script>

Dynamic #

Value is reactive so updating it dynamically changes the bar as well.


<template>
    <div class="card">
        <ProgressBar :value="progress"></ProgressBar>
    </div>
</template>

<script setup lang="ts">
import ProgressBar from '@/volt/ProgressBar.vue';
import { onBeforeUnmount, onMounted, ref } from 'vue';

onMounted(() => {
    startProgress();
});

onBeforeUnmount(() => {
    endProgress();
});

const progress = ref(0);
const interval = ref();
const startProgress = () => {
    interval.value = setInterval(() => {
        let newValue = progress.value + Math.floor(Math.random() * 10) + 1;
        if (newValue >= 100) {
            newValue = 100;
        }
        progress.value = newValue;
    }, 2000);
};
const endProgress = () => {
    clearInterval(interval.value);
    interval.value = null;
};
</script>

Template #

Custom content inside the ProgressBar is defined with the default slot.

40/100


<template>
    <div class="card">
        <ProgressBar :value="progress"> {{ progress }}/100 </ProgressBar>
    </div>
</template>

<script setup lang="ts">
import ProgressBar from '@/volt/ProgressBar.vue';

const progress = ref(40);
</script>

Indeterminate #

For progresses with no value to track, set the mode property to indeterminate.


<template>
    <div class="card">
        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
    </div>
</template>

<script setup lang="ts">
import ProgressBar from '@/volt/ProgressBar.vue';
</script>