Spectre Progress

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=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</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:

Example 2: The following demonstrates 2 progress bars showing the progress completion task.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</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:

Reference: https://picturepan2.github.io/spectre/experimentals/progress.html

Explore