1. Components
  2. meter

Meter

Graphical representation of a scalar measurement within a known range.

Demo 

<div class="flex flex-col gap-8 w-full">
    <x-ui.meter max="9" value="4" class="text-primary" />
    <x-ui.meter max="100" value="60" class="text-secondary" />
    <x-ui.meter max="40" value="20" class="text-danger" />
    <x-ui.meter max="14" value="14" class="text-success" />
</div>

Installation

Shell 
flexi-cli add meter

Indicator

40%
60% 
<div class="flex flex-col gap-8 w-full">
    <div>
        <div class="flex justify-end" style="width: 40%">
            <span class="text-sm text-fg">40%</span>
        </div>
        <x-ui.meter max="10" value="4" class="text-primary" />
    </div>
    <div class="relative h-max">
        <div class="flex justify-end absolute top-0 left-0 h-6 items-center z-5" style="width: 60%">
            <span class="text-sm text-white">60%</span>
        </div>
        <x-ui.meter size="xl" max="10" value="6" class="text-primary" />
    </div>
</div>

Meter Size 

<div class="flex flex-col gap-8 w-full">
    <x-ui.meter size="2xs" max="9" value="4" class="text-primary" />
    <x-ui.meter size="xs" max="100" value="60" class="text-primary" />
    <x-ui.meter size="sm" max="40" value="20" class="text-primary" />
    <x-ui.meter max="14" value="14" class="text-primary" />
    <x-ui.meter size="lg" max="20" value="10" class="text-primary" />
</div>
Prev
Skeleton

Animated placeholder...

Next
On this page