ProgressBar

1<script setup lang="ts">2import { Button, ProgressBar, StackPanel } from '@vitral/vue';3import { onBeforeUnmount, ref } from 'vue';4 5const value = ref(35);6let timer: ReturnType<typeof setInterval> | undefined;7 8function run() {9    clearInterval(timer);10    value.value = 0;11    timer = setInterval(() => {12        value.value = Math.min(100, value.value + Math.round(Math.random() * 12));13        if (value.value >= 100) clearInterval(timer);14    }, 300);15}16 17onBeforeUnmount(() => clearInterval(timer));18</script>19 20<template>21    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>22        <StackPanel spacing="0.375rem" style="width: 24rem">23            <span id="pb-upload">Uploading photos</span>24            <ProgressBar :value="value" aria-labelledby="pb-upload" />25        </StackPanel>26        <Button label="Run" icon="refresh" severity="secondary" size="small" @click="run" />27    </StackPanel>28</template>

1<script setup lang="ts">2import { ProgressBar, StackPanel } from '@vitral/vue';3</script>4 5<template>6    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>7        <StackPanel spacing="0.375rem" style="width: 24rem">8            <span id="pb-files">Copying files</span>9            <ProgressBar :value="64" unit=" of 100 files" aria-labelledby="pb-files" />10        </StackPanel>11        <StackPanel spacing="0.375rem" style="width: 24rem">12            <span id="pb-quiet">No label</span>13            <ProgressBar :value="80" :show-value="false" aria-labelledby="pb-quiet" />14        </StackPanel>15    </StackPanel>16</template>

1<script setup lang="ts">2import { ProgressBar, StackPanel } from '@vitral/vue';3</script>4 5<template>6    <StackPanel spacing="0.375rem" style="width: 24rem">7        <span id="pb-connect">Connecting…</span>8        <ProgressBar mode="indeterminate" aria-labelledby="pb-connect" />9    </StackPanel>10</template>