A progress bar is used to display the progress of a process. A progress bar helps us to visualize how much of the process is complete and how much is left. Spectre Progress is used to create a similar bar to display the progress.
Spectre Progress Class:
- progress: This class is used to create a progress layout.
Syntax:
<input class="progress" type="..."
min="..." max="..." value="..">Example 1: We can use progress class on the input element as well. In this example, we will create the same.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Progress</strong>
<br><br>
</center>
<div style="padding:10px;">
<!-- Sliders with tooltips -->
<input class="progress" type="range" min="0" max="100" value="25">
</div>
</body>
</html>
|
Output:
Spectre Progress
Example 2: The following demonstrates 2 progress bars showing the progress completion task.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Progress</strong>
<br><br>
</center>
<div style="padding:10px;">
<!-- Sliders with tooltips -->
<progress class="progress" value="75" max="100"></progress>
<progress class="progress" max="100"></progress>
</div>
</body>
</html>
|
Output:
Spectre Progress
Reference: https://picturepan2.github.io/spectre/experimentals/progress.html