Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
label label string ''
negative negative boolean false
notice notice boolean false
overBackground over-background boolean false
positive positive boolean false
progress progress number 0
sideLabel side-label boolean false
size size ElementSize

Slots #

Name Description
default slot text labeling the Meter

Description #

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.

Installation #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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';

Sizes #

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

Variants #

Over Background #

When a loader needs to be placed on top of a colored background, use the over background loader as signified by [over-background]. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.

style="width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: var(--spectrum-alias-background-color-modal-overlay);"

<sp-meter progress="42" over-background>Tasks Completed</sp-meter>

Side Label #

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>Side Label</sp-meter>