Vertical “Progress Bars” are hard.

There are almost a million horizontal methods because “width” is easy to just say “Oh, I’ll take 100% thank you very much.” – but vertical bars are much harder. In the past, I’ve had to rely on JavaScript libraries that generate bar charts, mostly graphing ones like Chartist or D3.

On a recent job I didn’t want to have to use any graphing libraries because I knew that it would always be one bar, not an entire bar graph, and that would be a lot of extra bloat for a few simple bars…

CSS Only:

This is an example of the 100% CSS-only version – where the values of the Goal Bar are hardcoded and the height of the bar’s container is hardcoded (but you can also just have a div with content inside of it). I’m sorry but today I’m too lazy to explain all the code so I’ll just drop a CodePen here:

See the Pen CSS-only Goal Bar by Julien Melissas (@JulienMelissas) on CodePen.0

“Hey, I’m going to be using dynamic content!”

Yeah, you and basically everyone else. That’s why I made this thing anyways!

For this particular project there is an Angular front-end where I’m just consuming a JSON API, so the code was already written for me to post here. It would be pretty easy to make this logic work in whatever you’re using though… (I also put a check in to move the .bar-info content above the bar if the percentage is less than 15%).

Check it out:

See the Pen CSS-only Goal Bar (with Angular) by Julien Melissas (@JulienMelissas) on CodePen.0

You can play with the $scope.current variable in the JS to see the bar move up and down and the graph will regenerate for you.

That should get you started. Feel free to let me know if you come up with a better way to do it or if you need some help implementing this in real life!