sp-meter

NPM 1.6.0

View Storybook

Try it on Stackblitz
Overview API Changelog

Overview

An <sp-meter> is a visual representation of a quantity or achievement. The meter's progress is determined by user actions, rather than system actions.

Usage

See it on NPM! How big is this package in your project? Try it on Stackblitz

yarn add @spectrum-web-components/meter

Import the side-effectful registration of <sp-meter> via:

import '@spectrum-web-components/meter/sp-meter.js';

When looking to leverage the Meter base class as a type and/or for extension purposes, do so via:

import { Meter } from '@spectrum-web-components/meter';

Anatomy

The meter consists of several key parts:

  • A label that describes what is being measured
  • A progress track showing the total possible range
  • A fill bar indicating the current progress
  • A percentage value showing the numeric progress
<sp-meter progress="71">Tasks Completed</sp-meter>

Label

The label is the text that describes what is being measured. It can be provided either through the default slot or the label attribute.

<sp-meter progress="15">Course Progress</sp-meter>
<br />
<sp-meter progress="15" label="Course Progress"></sp-meter>

Options

Sizes

Small 
<sp-meter size="s" progress="25">Tasks Completed</sp-meter>
 Medium 
<sp-meter size="m" progress="25">Tasks Completed</sp-meter>
 Large 
<sp-meter size="l" progress="25">Tasks Completed</sp-meter>
 Extra Large 
<sp-meter size="xl" progress="25">Tasks Completed</sp-meter>

Variants

The meter supports several variants to convey different semantic meanings:

Informative

By default, the informative variant can be used to represent a neutral or non-semantic value, such as the number of tutorials completed.

<sp-meter progress="50">Storage Space</sp-meter>
 Positive

The positive variant can be used to represent a positive semantic value, such as when there's a lot of space remaining. Use value variant="positive" to define a positive variant.

<sp-meter variant="positive" progress="50">Storage Space</sp-meter>
 Notice

The notice variant can be used to warn users about a situation that may need to be addressed soon, such as when space remaining is becoming limited. Use value variant="notice" to define a notice variant.

<sp-meter variant="notice" progress="73">Storage Space</sp-meter>
 Negative

The negative variant can be used to warn users about a critical situation that needs their urgent attention, such as when space remaining is becoming very limited. Use value variant="negative" to define a negative variant.

<sp-meter variant="negative" progress="92">Storage Space</sp-meter>

Label Position

A meter can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean side-label attribute to define where this content should appear.

<sp-meter side-label progress="68">Side Label</sp-meter>

Accessibility

The <sp-meter> element is rendered with role="meter progressbar" to ensure proper semantics for assistive technologies. The current progress value is set as a percentager via the progress attribute and is exposed to assistive technology via aria-valuenow.

<sp-meter progress="71" label="Download Progress">Download Progress</sp-meter>

Include a label

A meter is required to have either a visible text label or a label attribute.

Don't override color

The meter's variants provide semantic meaning through both color and ARIA attributes, ensuring that information is not conveyed through color alone. The progress track and fill maintain sufficient contrast for visibility.

Attributes and Properties

Property Attribute Type Default Description label label string '' progress progress number 0 sideLabel side-label boolean false staticColor static-color 'white' | undefined variant variant MeterVariants The variant applies specific styling when set to `negative`, `positive`, `notice` `variant` attribute is removed when not matching one of the above.

Slots

Name Description default slot text labeling the Meter

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/field-label@1.6.0
    • @spectrum-web-components/base@1.6.0
    • @spectrum-web-components/reactive-controllers@1.6.0
    • @spectrum-web-components/shared@1.6.0

1.5.0

Patch Changes

  • Updated dependencies [165a904]:
    • @spectrum-web-components/field-label@1.5.0
    • @spectrum-web-components/base@1.5.0
    • @spectrum-web-components/reactive-controllers@1.5.0
    • @spectrum-web-components/shared@1.5.0

1.4.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/field-label@1.4.0
    • @spectrum-web-components/base@1.4.0
    • @spectrum-web-components/reactive-controllers@1.4.0
    • @spectrum-web-components/shared@1.4.0

1.3.0

Patch Changes

  • Updated dependencies [ea38ef0]:
    • @spectrum-web-components/reactive-controllers@1.3.0
    • @spectrum-web-components/field-label@1.3.0
    • @spectrum-web-components/base@1.3.0
    • @spectrum-web-components/shared@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/meter

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/meter

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/meter

1.1.0 (2025-01-29)

Bug Fixes

  • lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

1.0.3 (2024-12-09)

Note: Version bump only for package @spectrum-web-components/meter

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/meter

1.0.0 (2024-10-31)

BREAKING CHANGES

  • remove deprecated 'static' references (#4818)

0.49.0 (2024-10-15)

Features

  • add static-color to replace static (#4808) (43cf086)

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/meter

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/meter

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/meter

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/meter

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/meter

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/meter

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/meter

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/meter

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/meter

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/meter

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/meter

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/meter

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/meter

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/meter

0.42.0 (2024-03-19)

Bug Fixes

  • styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/meter

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/meter

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/meter

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/meter

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/meter

0.40.3 (2024-01-11)

Bug Fixes

  • button: adds pending button, fixes #3162 (#3163) (71254ec)

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/meter

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/meter

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/meter

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/meter

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/meter

0.39.2 (2023-10-13)

Bug Fixes

  • update deps graph, update link docs (#3709) (2deb284)

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/meter

0.39.0 (2023-09-25)

Features

  • meter: add "variant" (coalescing various boolean attributes) and remove "over-background" attributes (#3514) (40e5f8a)

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/meter

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/meter

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/meter

0.35.0 (2023-07-31)

Bug Fixes

  • meter, progress-bar, progress-circle: use innerText when label is not provided (#3483) (59358c7)
  • meter: added role meter progressbar in meter component (#3459) (d2eccef)

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/meter

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/meter

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/meter

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/meter

0.31.0 (2023-05-17)

Bug Fixes

  • meter,progress-bar: add i18n to progress delivery (c7e4020)

0.30.0 (2023-05-03)

Bug Fixes

  • address a11y issues raised by updating our dependencies (4f06477)
  • meter: remove comment (27687ec)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update export patterns (b2da444)
  • update to latest spectrum-css packages (a5ca19f)
  • use ObserveSlotText mixin to prevent white space from overriding label attribute (610fb4b)

Features

  • action-button: add action button pattern (03ac00a)
  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • include all Dev Mode files in side effects (f70817c)
  • meter: add meter pattern (fa092ba)
  • meter: update spectrum css input (683bb1a)
  • progress-bar: use core tokens (540552e)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • tabs: add sp-tab-panel element (b17d276)
  • use latest exports specification (a7ecf4b)
  • use SixedMixin to manage "size" property (8819821)

0.8.4 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/meter

0.8.3 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/meter

0.8.2 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/meter

0.8.1 (2023-03-08)

Note: Version bump only for package @spectrum-web-components/meter

0.8.0 (2023-02-08)

Features

  • progress-bar: use core tokens (540552e)

0.7.8 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/meter

0.7.7 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/meter

0.7.6 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/meter

0.7.5 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/meter

0.7.4 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/meter

0.7.3 (2022-10-28)

Note: Version bump only for package @spectrum-web-components/meter

0.7.2 (2022-10-17)

Note: Version bump only for package @spectrum-web-components/meter

0.7.1 (2022-10-10)

Note: Version bump only for package @spectrum-web-components/meter

0.7.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.6.14 (2022-08-04)

Note: Version bump only for package @spectrum-web-components/meter

0.6.13 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/meter

0.6.12 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/meter

0.6.11 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/meter

0.6.10 (2022-05-27)

Note: Version bump only for package @spectrum-web-components/meter

0.6.9 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/meter

0.6.8 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/meter

0.6.7 (2022-03-30)

Note: Version bump only for package @spectrum-web-components/meter

0.6.6 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/meter

0.6.5 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/meter

0.6.4 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/meter

0.6.3 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/meter

0.6.2 (2022-01-07)

Note: Version bump only for package @spectrum-web-components/meter

0.6.1 (2021-12-13)

Note: Version bump only for package @spectrum-web-components/meter

0.6.0 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/meter

0.5.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/meter

0.5.0 (2021-11-02)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.4.10 (2021-10-12)

Note: Version bump only for package @spectrum-web-components/meter

0.4.9 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/meter

0.4.8 (2021-09-13)

Note: Version bump only for package @spectrum-web-components/meter

0.4.7 (2021-08-24)

Note: Version bump only for package @spectrum-web-components/meter

0.4.6 (2021-08-17)

Note: Version bump only for package @spectrum-web-components/meter

0.4.5 (2021-08-03)

Note: Version bump only for package @spectrum-web-components/meter

0.4.4 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/meter

0.4.3 (2021-07-01)

Note: Version bump only for package @spectrum-web-components/meter

0.4.2 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/meter

0.4.1 (2021-06-07)

Bug Fixes

  • use ObserveSlotText mixin to prevent white space from overriding label attribute (610fb4b)

0.4.0 (2021-05-24)

Features

  • tabs: add sp-tab-panel element (b17d276)

0.3.7 (2021-05-12)

Note: Version bump only for package @spectrum-web-components/meter

0.3.6 (2021-04-15)

Note: Version bump only for package @spectrum-web-components/meter

0.3.5 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/meter

0.3.4 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/meter

0.3.3 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/meter

0.3.2 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/meter

0.3.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/meter

0.3.0 (2021-03-04)

Features

  • use latest exports specification (a7ecf4b)

0.2.3 (2021-02-11)

Bug Fixes

  • update to latest spectrum-css packages (a5ca19f)

0.2.2 (2021-02-02)

Note: Version bump only for package @spectrum-web-components/meter

0.2.1 (2021-01-28)

Note: Version bump only for package @spectrum-web-components/meter

0.2.0 (2021-01-21)

Bug Fixes

  • address a11y issues raised by updating our dependencies (4f06477)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update export patterns (b2da444)
  • meter: remove comment (27687ec)

Features

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • action-button: add action button pattern (03ac00a)
  • meter: add meter pattern (fa092ba)
  • meter: update spectrum css input (683bb1a)

0.1.0 (2021-01-13)

Bug Fixes

  • stop merging selectors in a way that alters the cascade (369388f)
  • update export patterns (b2da444)
  • meter: remove comment (27687ec)

Features

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • action-button: add action button pattern (03ac00a)
  • meter: add meter pattern (fa092ba)
  • meter: update spectrum css input (683bb1a)