Flux

Appearance

Progress bar ​

A progress bar serves as a visual indicator that communicates the ongoing status and advancement of a task, particularly those that require a significant amount of time to complete. It functions by providing a graphical representation of the task's progress, offering users a clear insight into both the current activity and the overall completion status.

The Blacklist S01E03 - The Stewmaker75%

Props

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>

Status

A progress bar with a status message.

Downloading...75%

<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.

Collecting files...

<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.

Preparing...0%

<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.

Flux update
Downloading the new version of Flux.
Fetching Flux packages...75%

<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>

Used components ​