Commentary

The gauge widget provides a measure of an activity or outcome. The text provides a name of reported value and a numeric value. These are typically used in an administration page.

The parent HTML element is a figure tag. This is the container for the caption and the gauge. The gauge is a data HTML element that is the container for the CSS that creates the gauge. The child span element holds the data value and is positioned into the center of the gauge.

These gauges have one of 7 states:

  • Default: generic information display;
  • Primary: displayed data is important;
  • Secondary: displayed data is relevant;
  • Tertiary: displayed data is for information;
  • Success: displayed data is within satisfactory range;
  • Warning: displayed data is starting to move out of satisfactory range;
  • Danger: displayed data is outside of satisfactory range.

Usage

Classes:
.gauge-donut Defines the parent component for the simple donut gauge layout.
.gauge-ring Defines the parent component for an inverse donut gauge layout with a wider ring.
.gauge-meter Defines the parent component for the meter gauge layout that is 270 degrees around.
Optional colour modifiers. .gauge-primary, .gauge-secondary, .gauge-tertiary, .gauge-success, .gauge-warning, .gauge-danger
Dependencies:
File: gauge.css
Variables: --bg-main, --bg-main-invert, --danger, --grey-dark, --grey-light, --primary, --secondary, --size-2, --size-5, --success, --tertiary, --text, --text-invert, --warning, --weight-bold, --weight-semibold
Variables From HTML: --gauge-value, --gauge-max
Variables Internal: --ring-size

Examples

Gauge Donut Layout

65%
Donut Gauge

                <figure class="gauge-donut [gauge-primary gauge-secondary gauge-tertiary gauge-success gauge-warning gauge-alert]">
                    <data value="65" style="--gauge-value: 65; --gauge-max: 100;">
                        <span>65<sup>%</sup></span>
                    </data>
                    <figcaption>Donut Gauge</figcaption>
                </figure>

Gauge Ring Layout

25%
Ring Gauge

                <figure class="gauge-ring [gauge-primary gauge-secondary gauge-tertiary gauge-success gauge-warning gauge-alert]">
                    <data value="25" style="--gauge-value: 25; --gauge-max: 100;">
                        <span>25<sup>%</sup></span>
                    </data>
                    <figcaption>Ring Gauge</figcaption>
                </figure>

Gauge Meter Layout

55%
Meter Gauge

                <figure class="gauge-meter [gauge-primary gauge-secondary gauge-tertiary gauge-success gauge-warning gauge-alert]">
                    <data value="55" style="--gauge-value: 55; --gauge-max: 100;">
                        <span>55<sup>%</sup></span>
                    </data>
                    <figcaption>Meter Gauge</figcaption>
                </figure>