Meter - Kumo Svelte

Storage used 65%

<script lang="ts">
  import { Meter } from 'kumo-svelte';
</script>

<Meter label="Storage used" value={65} />

Installation

import { Meter } from 'kumo-svelte';

import { Meter } from 'kumo-svelte/components/meter';

<script lang="ts">  import { Meter } from 'kumo-svelte';</script><Meter label="Storage used" value={65} />

The default meter displays a label and percentage value.

Storage used 65%

<script lang="ts">
  import { Meter } from 'kumo-svelte';
</script>

<Meter label="Storage used" value={65} />

Use customValue to show a custom string instead of the percentage.

API requests 750 / 1,000

<script lang="ts">
  import { Meter } from 'kumo-svelte';
</script>

<Meter label="API requests" value={75} customValue="750 / 1,000" />

Set showValue={false} to hide the value display.

Progress

<script lang="ts">
  import { Meter } from 'kumo-svelte';
</script>

<Meter label="Progress" value={40} showValue={false} />

A meter at 100% capacity.

Quota reached 100%

<script lang="ts">
  import { Meter } from 'kumo-svelte';
</script>

<Meter label="Quota reached" value={100} />

A meter with a low value.

Memory usage 15%

<script lang="ts">
  import { Meter } from 'kumo-svelte';
</script>

<Meter label="Memory usage" value={15} />

Prop	Type	Default	Description
customValue	`string`	-	Custom value label.
label *	`string`	-	Visible label content.
showValue	`boolean`	`true`	Shows the current value.
trackClassName	`string`	-	Class for the meter track.
indicatorClassName	`string`	-	Class for the meter indicator.
value	`number`	`0`	Controlled value.
max	`number`	`100`	Maximum value.
min	`number`	`0`	Minimum value.
class	`string`	-	Additional classes merged onto the root element.