Spectre Bars
Last Updated :
19 Dec, 2022
Spectre Bars are used to represent the progress of the task, the value within the known range. Bars are components for displaying HTML5 <progress>, <meter> and input range elements.
In Spectre Bars, we have default bars and slider bars, the Spectre Slider Bars are used to create progress bars in slider mode. You can add the bar-slider class to the Bars container. Add child elements with the bar-item class and add class bar-slider-btn for the button inside div with class bar-item. You also need to add bar-item width manually to set the slider point.
Spectre Bars Types:
Spectre Bars Classes:
- bar: This class is used to create default bar and slide bars.
- bar-slider: This class is used to create slider bars.
Syntax:
<div class="bar bar-slider">
<div class="bar-item"
...
</div>
</div>
The below example illustrates the Spectre Bars.
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<style>
.bar {
margin-left: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Bars Class</strong>
</center>
<br>
<strong>Slider Bars:</strong>
<div class="bar">
<div class="bar-item" style="width:10%;">
</div>
<div class="bar-item" style="width:75%;">
</div>
</div>
<br>
<strong>Slider Bars:</strong>
<div class="bar">
<div class="bar-item" style="width:75%;">
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will create slider bars.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<style>
.bar {
margin-left: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Slider bars Class</strong>
</center>
<br>
<strong>Range Slider Bars:</strong>
<div class="bar bar-slider">
<div class="bar-item" style="width:10%;">
<button class="bar-slider-btn btn">
<br>Minimum
</button>
</div>
<div class="bar-item" style="width:75%;">
<button class="bar-slider-btn btn">
<br>Maximum
</button>
</div>
</div>
<br>
<strong>Slider Bars:</strong>
<div class="bar bar-slider">
<div class="bar-item" style="width:75%;">
<button class="bar-slider-btn btn">
<br>75%
</button>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://picturepan2.github.io/spectre/components/bars.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...