Meter

The meter widget visualizes a value as a horizontal progress bar. It supports theming with any Flux color or a custom hex color and can display a title, subtitle, tip, and footer alongside the percentage.

System resources

CPU usage4 cores68%of 100%

Load average: 1.2

Disk usageSSD74%of 500 GB

374 GB used

Props

value: number
The current value as a fraction between 0 and 1.

color?: FluxColor | `#${string}`
The color of the meter bar. Accepts a FluxColor or a custom hex color.

footer?: string
A footer text shown below the bar.

icon?: FluxIconName
An icon shown in the header.

is-small?: boolean
Renders the meter in a compact style.

sub-title?: string
A secondary title shown next to the main title.

tip?: string
A tip text shown to the right of the percentage.

title?: string
The title of the meter.

Examples

Compact

Multiple compact meters grouped inside a statistics base widget.

Preview

System resources

68%CPU

74%Disk

45%Memory

Code

<template>
    <FluxStatisticsBase
        style="min-width: 100%; max-width: 360px"
        title="System resources">
        <FluxStack>
            <FluxStatisticsMeter
                is-small
                color="success"
                style="width: 210px"
                tip="CPU"
                :value="0.68"/>

            <FluxStatisticsMeter
                is-small
                color="warning"
                style="width: 210px"
                tip="Disk"
                :value="0.74"/>

            <FluxStatisticsMeter
                is-small
                color="info"
                style="width: 210px"
                tip="Memory"
                :value="0.45"/>
        </FluxStack>
    </FluxStatisticsBase>
</template>

<script
    setup
    lang="ts">
    import { FluxStack } from '@flux-ui/components';
    import { FluxStatisticsBase, FluxStatisticsMeter } from '@flux-ui/statistics';
</script>