Progress

Use to display the length of time a process will take, visualize a percentage value (determinate) or to represent an unspecified wait time (indeterminate).

Connotation

The connotation attribute controls the color of the Progress component.

<script setup lang="ts">
import { VProgress } from '@vonage/vivid-api-vue';
</script>
<template>
  <p>accent (default)</p>
  <VProgress :min="0" :max="100" :value="25" connotation="accent" />
  <p>cta</p>
  <VProgress :min="0" :max="100" :value="25" connotation="cta" />
  <p>success</p>
  <VProgress :min="0" :max="100" :value="25" connotation="success" />
  <p>alert</p>
  <VProgress :min="0" :max="100" :value="25" connotation="alert" />
  <p>pacific</p>
  <VProgress :min="0" :max="100" :value="25" connotation="pacific" />
</template>

<p>accent (default)</p>
<vwc-progress min="0" max="100" value="25" connotation="accent"></vwc-progress>
<p>cta</p>
<vwc-progress min="0" max="100" value="25" connotation="cta"></vwc-progress>
<p>success</p>
<vwc-progress min="0" max="100" value="25" connotation="success"></vwc-progress>
<p>alert</p>
<vwc-progress min="0" max="100" value="25" connotation="alert"></vwc-progress>
<p>pacific</p>
<vwc-progress min="0" max="100" value="25" connotation="pacific"></vwc-progress>

Shape

The shape attribute the border radius.

<script setup lang="ts">
import { VProgress } from '@vonage/vivid-api-vue';
</script>
<template>
  <p>rounded (default)</p>
  <VProgress :min="0" :max="50" :value="25" shape="rounded" />
  <p>sharp</p>
  <VProgress :min="0" :max="50" :value="25" shape="sharp" />
</template>

Paused

The paused attribute shows a disabled / paused state of the progress.

<script setup lang="ts">
import { VProgress } from '@vonage/vivid-api-vue';
</script>
<template>
  <p>Determinate</p>
  <VProgress :min="0" :max="50" :value="25" paused />
  <p>Indeterminate</p>
  <VProgress :min="0" :max="50" paused />
</template>

Reverse

The reverse attribute sets the progress from right to left.

<script setup lang="ts">
import { VProgress } from '@vonage/vivid-api-vue';
</script>
<template>
  <p>Determinate</p>
  <VProgress :min="0" :max="50" :value="25" reverse />
  <p>Indeterminate</p>
  <VProgress :min="0" :max="50" reverse />
</template>

Value

Providing a numeric value to the value attribute sets the amount of progress to be displayed in determinate state. In order to present an indeterminate state provide a non-numeric value.

<script setup lang="ts">
import { VProgress } from '@vonage/vivid-api-vue';
</script>
<template>
  <p>Determinate</p>
  <VProgress :value="50" aria-label="You are 50% through the process" />
  <p>Indeterminate</p>
  <VProgress aria-label="Loading search results" />
</template>

Min / Max

Use min and max attributes to determine the range of the progress.