Spectre Progress
Last Updated :
17 Aug, 2022
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;">
<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;">
<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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...