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 =
< 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
Share your thoughts in the comments
Please Login to comment...