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/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 class = "text-success" >w3wiki</ 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/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 class = "text-success" >w3wiki</ 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
Contact Us