Create a simple progress bar with HTML5
Two weeks ago our small team started to collaborate through our handmade kanban, which works well so far, and it has helped us to have a clear focus, efficient output and great cycle time.
One of the most complex cards for this week included creating some nice progress bars, so I decided to share how I built them with HTML5.
Feel free to try it yourself and include them in your next project! It could enhance the user experience while waiting for a complete task!
1 - The first step in the HTML document is to add the HTML5 progress element <progress></progress>. You should specify the “max” attribute, which is the maximum value when a task is finished, and the “value”, which is the current status of the progress bar. Find out more details about this element in css-tricks.
2 - To change the appearance of the progress bar, let’s add some CSS styles. You can include display, width, height, border and border-radius properties. In this example I set -webkit-appereance to none, in order to reset the default styles (see “.wrapper-bar progress”).
To style the progress bar “container”, it’s necessary to set -webkit-progress-bar pseudoclass. In this case, I set the background, padding and border-radius properties.
3 - Now, let’s add some effect to the value inside the progress bar. So, we’ll need the -webkit-progress-value pseudoclass. You’ll notice that I set a linear gradient effect and an animation too.
4 - Finally, add the keyframe animation using vendor prefixes. I named it “animation”, 0% and 100%, indicate the starting and ending states of the animation. Learn more about the keyframe animation syntax in css-tricks.
I’m really enjoying the learning process that this kanban flow facilitates!
View this live example.