How to Create a Progress Bar HTML, CSS, and JavaScript
Happy day 14! For this challenge I have created a Github repo that I will post a link to below.
If you would like me to do a post on Github and how to use it let me know I am happy to do so!
Disclaimer: there are MANY ways to solve this challenge this is just my version of this challenge
TLDR: Solution is at the bottom of the post
Repo for this series: https://github.com/hellodevworldblog/progress-bar
To test your code all your have to do is go to the folder where the index.html document created is and double click it. It will open a web browser with your code. To see changes you have made save the file and refresh that page.
The Problem
Create a progress bar. This can be a pretty or as boring as you want. It will likely need HTML, CSS, and JavaScript but can be done without all 3
The Solution
This is what our progress bar is going to look like
First we need to create our html page with a container to for the progress bar (to make it pretty) and the progress bar itself.
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Progress Bar</title> </head> <body> <div class="progressBarContainer"> <div class="progressBar"></div> </div> </body> </html>
To center our progress bar on the page we are going to add styling to the body
body { display: flex; justify-content: center; align-items: center; }
Now to make the container a little nicer so we don’t have just a progress bar on a page with nothing around it.
Position relative makes the position of the element relative to itself. It is not relative to any other elements on the page and will not affect any other elements on the page.
The padding will give it space around the progress bar so you will see the grey around the progress bar.
Border-radius will give the ends a round corner instead of a sharp one. This is what will make the shape more of a rounded rectangle rather than a box.
.progressBarContainer { height: 15px; padding: 5px; width: 50%; border-radius: 20px; position: relative; background: lightgray; }
Now we need to make our progress bar pretty!
To make the gradient I used css gradient it is a great site to create a gradient and it will spit out the css for it. Gradients can be a pain and this site is magical.
Everything else should look familiar.
.progressBar { display: block; border-radius: 20px; height: 15px; background: rgb(131, 58, 180); background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%); position: relative; }
Making the pretty stripes to go over the progress bar is a little more complicated.
z-index will change what layer of the page this class is and will make this class the top layer of the page. By not setting any others and setting this to one it will be the top layer. if there were another class set to 2 that would be the top layer, etc. etc.
Position absolute will make all the positioning relative to its parent which is the progressBarContainer.
everything else should look familiar. This is loosely based on this post that has some more examples of progress bars.
.progressBar:after { content: ""; z-index: 1; position: absolute; width: 100%; height: 100%; background: linear-gradient( 135deg, rgba(206, 204, 204, 0.445) 25%, transparent 25%, transparent 50%, rgba(206, 204, 204, 0.445) 50%, rgba(206, 204, 204, 0.445) 75%, transparent 75%, transparent); background-size: 40px 40px; }
This script is just to make the progress bar move rather than be static and give and example of how you would maybe set the progress width if you were to implement it in real life. The interval is just to make it increment this is not something you would really use in practice.
<script> const elem = document.getElementsByClassName("progressBar")[0]; let width = 1; let id = setInterval(frame, 100); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + "%"; elem.text(width + "% Complete"); } } </script>
This is what the whole file looks like
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Progress Bar</title> </head> <body> <div class="progressBarContainer"> <div class="progressBar"></div> </div> </body> </html> <style> body { display: flex; justify-content: center; align-items: center; } .progressBarContainer { height: 15px; padding: 5px; width: 50%; border-radius: 20px; position: relative; background: lightgray; } .progressBar { display: block; border-radius: 20px; height: 15px; background: rgb(131, 58, 180); background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%); position: relative; } .progressBar:after { content: ""; z-index: 1; position: absolute; width: 100%; height: 100%; background: linear-gradient( 135deg, rgba(206, 204, 204, 0.445) 25%, transparent 25%, transparent 50%, rgba(206, 204, 204, 0.445) 50%, rgba(206, 204, 204, 0.445) 75%, transparent 75%, transparent); background-size: 40px 40px; } </style> <script> const elem = document.getElementsByClassName("progressBar")[0]; let width = 1; let id = setInterval(frame, 100); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + "%"; elem.text(width + "% Complete"); } } </script>
I hope you had fun with this one! Please leave your repo links to your form in the comments section. Also let me know if you like the multi day challenges or really hate them! If you have any challenge you would like to see done also leave that in the comments below you may see it come up! If you would like to get the challenge emailed to you every day in morning and a notification when the solution is posted subscribe below.
