Creating a Progress bar with HTML & Js

Sunny Pepple
Sep 2, 2018 · 1 min read

Technical writing has no been my strongest suite, but my goal is to express my thought process on how I solve problems in my own way.

https://github.com/pepps01/ProgressBarIt/blob/master/progressbar.php

First, I created a sketch on paper of how I wanted the progress bar to look like considering adding other elements and variables as I start developing.

Secondly, I created a file that handles HTML, CSS and Javascript on the page (since its a small project). I began by writing out the <div> elements on the page from which my stylesheet and jQuery extensions can hang on.

Enabled the road bar to cut accross the page and created a little nested element to form as “my car”.

The “car” is simply activated and moved by the “GO” button as as simple click event for the “car” to cut across the width of the of the browser window.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade