Progress

Indicates the progress of an operation

Usage

<template>
  <winui-progress progress="50" />
</template>

Props

progress optional

• Type: number | string | "indeterminate"
• Default: 0

The percentage value of the progress. If the value is "indeterminate", the progress bar will animate.

transition optional

• Type: number | string
• Default: 0

The transition duration of the progress bar in milliseconds. This makes the progress bar animate smoothly.

Customization

Use the class name .winui-progress to override/customize the component's styles.

The component also supports the following classes:

• .paused - indicates that the progress is paused
• .error - indicates that the progress has encountered an error
• .animate - animates the progress bar

Examples

Different progress states

<winui-progress progress="70" />
<winui-progress progress="50" class="paused" />
<winui-progress progress="30" class="error" />
<winui-progress progress="indeterminate" />

Animating the progress bar

<winui-progress progress="30" class="animate" />
<winui-progress progress="50" class="animate paused" />
<winui-progress progress="70" class="animate error" />

Binding the progress values

<template>
  <div>
    <winui-progress :progress="progress" :transition="transition" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
      transition: 100,
    };
  },
  mounted() {
    setInterval(() => {
      this.progress += 1;
      if (this.progress > 100) {
        this.progress = 0;
      }
    }, this.transition);
  },
};
</script>