How to Create a Duration-Based Progress Bar with PrimeVue ProgressBar

I used to struggle with creating a progress bar using PrimeVue's ProgressBar component that smoothly runs from 0% to 100% over a specified duration. However, after reading the PrimeVue documentation, I couldn't find any built-in option to achieve this. So, a bit of trickery is needed here.

First, let's check out the documentation for this component: PrimeVue ProgressBar
We can see that we need to pass a prop called :value, which is a number between 0 and 100 representing the progress percentage.

Next, let's take a look at the Dynamnic
section of the documentation.

Here, we can see that whenever the value of the progress bar changes, it takes some time for the old value to transition to the new one. So, how long does this transition take?

Let's inspect this element:

Notice that there is a CSS property transition: width 1s ease-in-out;. This means it takes 1 second for the progress bar to update its value. In other words, when changing the value from 0% to 100%, it takes 1 second to complete. So, the default duration for this component is 1 second.

To customize this duration, we simply need to modify the transition-duration property of the progress-bar-value element inside the ProgressBar component. We can achieve this using PrimeVue's passthrough feature:

<template>
  <ProgressBar :value="value" :pt:value:style="{ 'transition-duration': '3s' }" />
</template>

Now, simply update the value to see the effect.

Final Result:

// ~/components/app/progress-bar.vue
<template>
  <p-progress-bar
    v-bind="props"
    :pt:value:style="{ 'transition-duration': props.duration }"
  />
</template>

<script setup lang="ts">
import type { ProgressBarProps } from 'primevue';

// define prop type to get suggestion in VSCode
interface AppProgressBarProps extends /* @vue-ignore */ ProgressBarProps {
  duration?: string;
}

const props = withDefaults(defineProps<AppProgressBarProps>(), {
  duration: '3s',
});
</script>

StackBlitz: https://stackblitz.com/edit/nuxt-starter-cdnmfmvv?file=components%2Fapp%2Fprogress-bar.vue