Progress

Component source on Github This page on Github

Reference

autostart-timerfalse
Boolean
base"progress"
String
Base name used to style component
indeterminatefalse
Boolean
Renders indeterminate progress bar. Note: value, max, label, precision and transition props are ignored if indeterminate is true. You can switch between indeterminate or determinate by flicking this prop on and off
labelfalse
Boolean
Display value on progress bar if true. Label can be customized via label slot
max100
NumberString
Maximum value of progress
mod-labelempty string
String
Style of the label element
mod-progressempty string
String
Style of the main progress element
mod-progress-barempty string
String
Style of the progress bar element
nameempty string
String
Name of the component
precision2
Number
Number of digits after dot in progress value, minimum = 0, maximum = 100
timer0
Number
transitionfalse
Boolean
Add smooth animation when value change
value0
NumberString
Current progress
variantempty string
String
Active variant of the element mod-* props
Slots
label
Slot for custom label

Notes

Progress mode

There are three basic modes of the progress bar:

  • indeterminate is the simplest that shows progress continously until disabled (similar to loaders or spinners)
  • default shows the progress from the 0 to the value of the max prop. The current value is stored in the value prop
  • timer shows progress of the time defined in the timer prop

The progress can be changed to indeterminate at any time when using other modes. See the example below.

Example - props

false
true
    <template>
  <!-- simple progress -->

  <v-progress v-bind="example"></v-progress>

  <!-- progress with custom label -->

  <v-progress
    v-bind="example"
    mod-progress="shape:square"
    mod-progress-bar="variant:red shape:square"
    class="mt-4"
  >
    <template #label="{ value, max }">
      <span
        class="absolute left-1/2 -translate-x-1/2 text-xs font-bold text-white"
      >
        {{ value.toFixed() }} / {{ max }}
      </span>
    </template>
  </v-progress>

  <!-- narrow, styled progress -->

  <v-progress
    v-bind="example"
    mod-progress="size:tiny"
    mod-progress-bar="variant:gradient"
    class="mt-4"
  ></v-progress>

  <!-- page load progress -->

  <v-progress
    mod-progress="size:tiny variant:transparent"
    mod-progress-bar="variant:gradient"
    :value="example.value"
    :label="false"
    :transition="example.transition"
    class="fixed left-0 top-0 z-50 w-full"
  ></v-progress>

</template>
  

    
  

  
    <script setup>
import { reactive } from "vue";

let example = reactive({
  value: 20,
  max: 100,
  label: false,
  precision: 2,
  transition: true,
});
</script>

Example - indeterminate

Checking for updates...
Combined indeterminate and deteminate example
Checking for updates...
    <template>
  <!-- simple indeterminate progress -->

  <v-progress
    mod-progress="size:tiny"
    mod-progress-bar="variant:gradient"
    indeterminate
    class="my-8"
  ></v-progress>

  <!-- simple indeterminate progress -->

  <v-card width="400px">
    <div class="flex justify-center p-4">Checking for updates...</div>
    <v-progress
      mod-progress="size:tiny"
      mod-progress-bar="variant:gradient"
      indeterminate
      class="m-2"
    ></v-progress>
  </v-card>

  <!-- combined indeterminate and deteminate progress -->

  <div class="my-6">Combined indeterminate and deteminate example</div>

  <v-card width="400px">
    <div class="flex justify-center p-4">
      <span v-if="example.indeterminate">Checking for updates...</span>
      <span v-if="!example.indeterminate">Updating...</span>
    </div>
    <v-progress
      mod-progress="size:tiny"
      mod-progress-bar="variant:gradient"
      :value="example.value"
      :label="false"
      :indeterminate="example.indeterminate"
      class="m-2"
    ></v-progress>
  </v-card>
</template>
  

    
  

  
    <script setup>
import { reactive, onMounted } from "vue";

let example = reactive({
  value: 0,
  label: false,
  indeterminate: true,
});

onMounted(() => {
  setInterval(() => {
    example.indeterminate = !example.indeterminate;
    if (example.indeterminate) return
    example.value = 0;
    let i = setInterval(() => {
      example.value += 0.2;
      if (example.value >= 100) {
        clearInterval(i);
      }
    }, 10);
  }, 3000);
});
</script>

Example - indeterminate custom animations

    <template>
  <v-progress
    mod-progress="size:tiny width:long easing:inOut speed:fast"
    mod-progress-bar="variant:gradient"
    indeterminate
    class="my-8"
  ></v-progress>
</template>

Example - timer progress

    <template>
  <v-progress
    :timer="4000"
    autostart-timer
    mod-progress="size:medium shape:square"
    mod-progress-bar="shape:square"
  ></v-progress>
</template>
  

    
  

  
    <script setup>
import { reactive, ref } from "vue";
</script>