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.

Output:

Spectre Progress

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

Output:

Spectre Progress

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