| <div class="progress"> | |
| <div class="progress__fill"></div> | |
| <span class="progress__text">0%</span> | |
| </div> |
Taken from my YouTube Video Tutorial: https://youtu.be/kjhsS4lNZ9o
In today's tutorial we'll be creating an easy-to-use animated progress bar using HTML and CSS. The value of the progress bar can either be updated on the server-side or dynamically using a JavaScript function which will also be covered.
| function updateProgressBar(progressBar, value) { | |
| value = Math.round(value); | |
| progressBar.querySelector(".progress__fill").style.width = `${value}%`; | |
| progressBar.querySelector(".progress__text").textContent = `${value}%`; | |
| } | |
| const myProgressBar = document.querySelector(".progress"); | |
| /* Example */ | |
| updateProgressBar(myProgressBar, 72); |
| .progress { | |
| position: relative; | |
| width: 210px; | |
| height: 30px; | |
| background: #9cbab4; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| } | |
| .progress__fill { | |
| width: 0%; | |
| height: 100%; | |
| background: #009579; | |
| transition: all 0.2s; | |
| } | |
| .progress__text { | |
| position: absolute; | |
| top: 50%; | |
| right: 5px; | |
| transform: translateY(-50%); | |
| font: bold 14px "Quicksand", sans-serif; | |
| color: #ffffff; | |
| } |