Meter

A meter represents a quantity within a known range, or a fractional value.

Import

import { AvMeterImports } from '@avesra/angular';

Usage

Storage60

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvMeterImports,
} from '@avesra/angular';

@Component({
  selector: 'app-meter-basic-demo',
  imports: [
    AvMeterImports,
    AvLabelComponent,
  ],
  template: `<div class="w-64" av-meter [value]="60">
  <label av-label>Storage</label>
  <span av-meter-output></span>
  <div av-meter-track>
    <div av-meter-fill></div>
  </div>
</div>`,
})
export class MeterBasicDemo {}

Anatomy

Import the Meter parts and compose them with attribute selectors on <div>, <span>, and <label> hosts. Project av-label, av-meter-output, av-meter-track, and av-meter-fill inside div[av-meter].

<div av-meter [value]="60">
  <label av-label>Storage</label>
  <span av-meter-output></span>
  <div av-meter-track>
    <div av-meter-fill></div>
  </div>
</div>

Sizes

Small40

Medium60

Large80

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvMeterImports,
} from '@avesra/angular';
import type { AvMeterColor, AvMeterSize } from '@avesra/angular';

interface MeterSizeDemo {
  size: AvMeterSize;
  color: AvMeterColor;
  label: string;
  value: number;
}

@Component({
  selector: 'app-meter-sizes-demo',
  imports: [
    AvMeterImports,
    AvLabelComponent,
  ],
  template: `<div class="flex w-64 flex-col gap-6">
  @for (item of items; track item.size) {
    <div av-meter [size]="item.size" [color]="item.color" [value]="item.value">
      <label av-label>{{ item.label }}</label>
      <span av-meter-output></span>
      <div av-meter-track>
        <div av-meter-fill></div>
      </div>
    </div>
  }
</div>`,
})
export class MeterSizesDemo {
  readonly items: MeterSizeDemo[] = [
    { size: 'sm', color: 'success', label: 'Small', value: 40 },
    { size: 'md', color: 'accent', label: 'Medium', value: 60 },
    { size: 'lg', color: 'warning', label: 'Large', value: 80 },
  ];
}

Colors

Default50

Accent50

Success50

Warning50

Danger50

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvMeterImports,
} from '@avesra/angular';
import type { AvMeterColor } from '@avesra/angular';

interface MeterColorDemo {
  color: AvMeterColor;
  label: string;
}

@Component({
  selector: 'app-meter-colors-demo',
  imports: [
    AvMeterImports,
    AvLabelComponent,
  ],
  template: `<div class="flex w-64 flex-col gap-6">
  @for (item of items; track item.color) {
    <div av-meter [color]="item.color" [value]="50">
      <label av-label>{{ item.label }}</label>
      <span av-meter-output></span>
      <div av-meter-track>
        <div av-meter-fill></div>
      </div>
    </div>
  }
</div>`,
})
export class MeterColorsDemo {
  readonly items: MeterColorDemo[] = [
    { color: 'default', label: 'Default' },
    { color: 'accent', label: 'Accent' },
    { color: 'success', label: 'Success' },
    { color: 'warning', label: 'Warning' },
    { color: 'danger', label: 'Danger' },
  ];
}

Without Label

When no visible label is needed, set aria-label on div[av-meter] for accessibility.

import { Component } from '@angular/core';
import { AvMeterImports } from '@avesra/angular';

@Component({
  selector: 'app-meter-without-label-demo',
  imports: [AvMeterImports],
  template: `<div class="w-64" av-meter aria-label="Storage usage" [value]="45">
  <div av-meter-track>
    <div av-meter-fill></div>
  </div>
</div>`,
})
export class MeterWithoutLabelDemo {}

Custom Value Scale

Use min, max, and format-options to customize the value range and display format.

Revenue$750.00

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvMeterImports,
} from '@avesra/angular';

@Component({
  selector: 'app-meter-custom-value-demo',
  imports: [
    AvMeterImports,
    AvLabelComponent,
  ],
  template: `<div
  class="w-64"
  av-meter
  [min]="0"
  [max]="1000"
  [value]="750"
  [format-options]="formatOptions"
>
  <label av-label>Revenue</label>
  <span av-meter-output></span>
  <div av-meter-track>
    <div av-meter-fill></div>
  </div>
</div>`,
})
export class MeterCustomValueDemo {
  readonly formatOptions: Intl.NumberFormatOptions = {
    style: 'currency',
    currency: 'USD',
  };
}

Styling

Passing Tailwind CSS classes

Pass utility classes on individual Meter parts — for example av-meter-track and av-meter-fill.

Storage60

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvMeterImports,
} from '@avesra/angular';

@Component({
  selector: 'app-meter-custom-styling-demo',
  imports: [
    AvMeterImports,
    AvLabelComponent,
  ],
  template: `<div class="w-64" av-meter [value]="60">
  <label av-label>Storage</label>
  <span av-meter-output></span>
  <div av-meter-track class="!bg-purple-100 dark:!bg-purple-900">
    <div av-meter-fill class="!bg-purple-500"></div>
  </div>
</div>`,
})
export class MeterCustomStylingDemo {}

Customizing the component classes

To customize the Meter classes, use the @layer components directive. Learn more.

@layer components {
  .av-meter {
    @apply w-full gap-2;
  }

  .av-meter__track {
    @apply h-3 rounded-full;
  }

  .av-meter__fill {
    @apply rounded-full;
  }
}

Avesra follows the BEM methodology so component variants and states stay reusable and easy to customize.

CSS Classes

The Meter component uses these CSS classes:

Base & Element Classes

.av-meter — Base container (grid layout)
.av-meter__output — Value text display
.av-meter__track — Track background
.av-meter__fill — Filled portion of the track

Size Classes

.av-meter--sm — Small size variant (thinner track)
.av-meter--md — Medium size variant (default)
.av-meter--lg — Large size variant (thicker track)

Color Classes

.av-meter--default — Default color variant
.av-meter--accent — Accent color variant
.av-meter--success — Success color variant
.av-meter--warning — Warning color variant
.av-meter--danger — Danger color variant

API

Props for div[av-meter]. span[av-meter-output], div[av-meter-track], and div[av-meter-fill] project content / render the bar and have no inputs. Compose with shared label[av-label] when a visible label is needed.

Prop	Type	Default	Description
`value`	`number`	`0`	The current value (div[av-meter]).
`min`	`number`	`0`	The minimum value (div[av-meter]).
`max`	`number`	`100`	The maximum value (div[av-meter]).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the meter track (div[av-meter]).
`color`	`'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Color of the fill bar (div[av-meter]).
`format-options`	`Intl.NumberFormatOptions`	—	Number format for the value display on av-meter-output (div[av-meter]).
`disabled`	`boolean`	`false`	Disables the meter (div[av-meter]).
`aria-label`	`string`	—	Accessible label when no visible label is provided (div[av-meter]).