Progress Ring
Use to display the length of time a process will take, visualize a percentage value (determinate) or to represent an unspecified wait time (indeterminate).
Determinate state can be used to display how much of a process has been completed. Although, it may be that the Progress component is better suited for this task.
<script setup lang="ts">import { VProgressRing } from '@vonage/vivid-api-vue';</script><template> <VProgressRing :min="1" :max="5" :value="2" aria-label="Step 2 of 5" /></template><vwc-progress-ring min="1" max="5" value="2" aria-label="Step 2 of 5"></vwc-progress-ring>Indeterminate state can be used to indicated that something is loading.
<script setup lang="ts"> import {VProgressRing} from '@vonage/vivid-api-vue';</script><template> <VProgressRing aria-label="Loading search results" /></template><vwc-progress-ring aria-label="Loading search results"></vwc-progress-ring>