Progress bar
The progress bar is a visual indicator of a task's status and completion, useful for operations that take a noticeable amount of time.
Accessibility
The reported aria-valuenow is always clamped to the min/max range, so out-of-bounds values never confuse assistive technology. When is-indeterminate is set, aria-valuenow is omitted entirely so screen readers announce an in-progress state of unknown duration.
Props
color?: FluxColor
The color of the progress bar fill.
Default: primary
is-indeterminate?: boolean
If the progress bar is in an indeterminate state.
max?: number
The maximum value of the progress bar.
Default: 1
min?: number
The minimum value of the progress bar.
status?: string
The status message of the progress bar.
value?: number
The current value of the progress bar.
Examples
Basic
A basic progress bar.
<template>
<FluxPane>
<FluxPaneBody>
<FluxProgressBar
:value="0.75"/>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxPaneBody, FluxProgressBar } from '@flux-ui/components';
</script>Colors
Progress bars in each of the available colors.
<template>
<FluxPane>
<FluxPaneBody>
<FluxFlex :gap="15">
<FluxProgressBar
v-for="color of colors"
:key="color"
:color="color"
:value="0.6"/>
</FluxFlex>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import type { FluxColor } from '@flux-ui/types';
import { FluxFlex, FluxPane, FluxPaneBody, FluxProgressBar } from '@flux-ui/components';
const colors: FluxColor[] = ['gray', 'primary', 'danger', 'info', 'success', 'warning'];
</script>Status
A progress bar with a status message.
<template>
<FluxPane>
<FluxPaneBody>
<FluxProgressBar
status="Downloading..."
:value="0.75"/>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxPaneBody, FluxProgressBar } from '@flux-ui/components';
</script>Indeterminate
A progress bar with an indeterminate state.
<template>
<FluxPane>
<FluxPaneBody>
<FluxProgressBar
is-indeterminate
status="Collecting files..."/>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxPaneBody, FluxProgressBar } from '@flux-ui/components';
</script>Complete
A progress bar that will complete itself.
<template>
<FluxPane>
<FluxPaneBody>
<FluxProgressBar
:status="status"
:value="value"/>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxPaneBody, FluxProgressBar } from '@flux-ui/components';
import { ref, unref, onMounted, onUnmounted } from 'vue';
const timer = ref<NodeJS.Timeout>();
const status = ref('Preparing...');
const value = ref(0);
async function playbook(): Promise<void> {
status.value = 'Preparing...';
value.value = 0;
await wait(600);
await tween(0.2);
status.value = 'Downloading...';
await wait(300);
await tween(0.7);
status.value = 'Unzipping...';
await wait(600);
await tween(1);
status.value = 'Done.';
await wait(1500);
requestAnimationFrame(playbook);
}
async function tween(percentage: number): Promise<void> {
for (let p = unref(value); p <= percentage; p += 0.001) {
value.value = p;
await wait(Math.random() * 6 + 3);
}
value.value = percentage;
}
async function wait(ms: number): Promise<void> {
await new Promise(resolve => timer.value = setTimeout(resolve, ms));
}
onMounted(async () => await playbook());
onUnmounted(() => clearTimeout(unref(timer)));
</script>Snackbar
A progress bar inside a snackbar.
<template>
<FluxSnackbar
is-rendered
progress-status="Fetching Flux packages..."
:progress-value="0.75"
icon="arrow-down-to-line"
message="Downloading the new version of Flux."
title="Flux update"/>
</template>
<script
setup
lang="ts">
import { FluxSnackbar } from '@flux-ui/components';
</script>