Vue Progress - Soft UI

Our Vue progressbar can be used to show a user how far along he is in a process. The progress can be determinate or indeterminate. Use the Progress Bar to show an ongoing process that takes a noticeable time to finish.

Below we are presenting our examples of progress components that you can use in your Vue.js project.

Default Progress

Use this example to create a simple and user-friendly progress bar.

<template>
 <soft-progress :percentage="60" />
</template>

<script>
import SoftProgress from "@/components/SoftProgress.vue";
export default { components: { SoftProgress, }, };
</script>

1<template>
2 <soft-progress :percentage="60" />
3</template>
4
5<script>
6import SoftProgress from "@/components/SoftProgress.vue";
7export default { components: { SoftProgress, }, };
8</script>

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''danger''error''light''dark'	success	Change `SoftProgress` progress color.
percentage*	Number		Used to set the progress for `SoftProgress`.
variant	'gradient''fill'	fill	Change the `SoftProgress` background type by using `variant` alongside `color`.

Progress Bar Variants

Use these examples to create progress components in different styles: filled and with gradient.

<template>
 <soft-progress percentage="70" variant="fill" color="success" />
 <soft-progress percentage="70" variant="gradient" color="success" />
</template>

<script>
import SoftProgress from "@/components/SoftProgress.vue";
export default { components: { SoftProgress, }, };
</script>

1<template>
2 <soft-progress percentage="70" variant="fill" color="success" />
3 <soft-progress percentage="70" variant="gradient" color="success" />
4</template>
5
6<script>
7import SoftProgress from "@/components/SoftProgress.vue";
8export default { components: { SoftProgress, }, };
9</script>