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=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<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=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<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