Spectre Meters

Last Updated : 09 Nov, 2022

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/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/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/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/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>