Spectre Meters

Spectre Meters represent the value within the known range. Meter is an important component of development, by using the meter class in Spectre we can create a meter field. We can indicate the meter status by its color which can be defined by using the attributes.

Spectre Meters Class:

meter: This class is used to create the Meter field.

Spectre Meters Attributes:

value: This attribute holds the meter value.
optimum: This attribute holds the possible outcome.
min: This attribute holds the minimum value of the meter box.
max: This attribute holds the maximum value of the meter box.
low: This attribute holds the lower value, which indicates the status of the meter.
high: This attribute holds a high value, which indicates the status of the meter.

Syntax:

<meter class="meter" 
       value="20" 
       optimum="85" 
       min="0" 
       max="100" 
       low="25" 
       high="75">
</meter>

Example 1: This example describes the basic usage of the Spectre Meters. Here, we will create a 4 meter, two of them will show green color, one will be yellow and another one will be red.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
    <style>
        body{
            margin: 5px;
        }
    </style>
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Meters</strong>
    </center>
    <br><br>
    <strong>Normal Meter:</strong>
    <meter class="meter" 
           value="55"
           min="0"
           max="100">
    </meter>
    <strong>Green Meter:</strong>
    <meter class="meter" 
           value="48" 
           min="0" 
           max="100" 
           low="25" 
           high="75">
    </meter>
    <strong>Yellow Meter:</strong>
    <meter class="meter" 
           value="35" 
           optimum="85" 
           min="0" 
           max="100" 
           low="25" 
           high="75">
    </meter>
    <strong>Red Meter:</strong>
    <meter class="meter" 
           value="18" 
           optimum="85" 
           min="0" 
           max="100" 
           low="25" 
           high="75">
    </meter>
</body>

</html>

Output:

Example 2: In this example, we will create 3 meters that will indicate 3 colors based on the attribute values set.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
    <style>
        body{
            margin: 5px;
        }
    </style>
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Meters</strong>
    </center>
    <br><br>
    <strong>Red Meter:</strong>
    <meter class="meter" 
           value="18" 
           optimum="85" 
           min="0" 
           max="100" 
           low="25" 
           high="75">
    </meter>
    <strong>Yellow Meter:</strong>
    <meter class="meter" 
           value="48" 
           optimum="85" 
           min="0" 
           max="100" 
           low="25" 
           high="75">
    </meter>
    <strong>Normal Meter:</strong>
    <meter class="meter" 
           value="58" 
           min="0" 
           max="100">
    </meter>
</body>

</html>

Output:

Supported Browsers:

Firefox 106 & above
Chrome 107 & above
Microsoft Edge 107
Safari 16.1
Opera 16

Reference: https://picturepan2.github.io/spectre/experimentals/meters.html

Explore