HomePortfolio → Simple and Stylish Circular Progress Bar

Simple and Stylish Circular Progress Bar

December 14, 2017

Made with: JavaScript and CSS3

Project Summary:

JS app that creates an animated and stylish progress bar around a circle with the progress score written in the center.

Source Files | Live Demo

I started with progressbar.js by Kimmo Brunfeldt, which does most of the heavy lifting. You can add it your project by including a link near your closing body tag to the CDN repository where progressbar.js resides.

I used Progressbar's circle as the base for my project (you can use other geometrical shapes), which is intended to create an animated score dashboard to display at the end of a quiz. I then customized the shape with the following options:

  1. I inserted the actual score in number format, centered in the middle of the circle. For this, I had to play with HTML id's and classes, and CSS absolute and relative positioning. Since the score is passed to a variable, I passed the variable to the “animate" function that draws the progress bar around the circle. For example, if the score is 8, the progress bar will only display around 80% of the circle (like in the image at the beginning of the article).

  2. I Gave the progress bar different colors, depending on the score, which runs from 0 to 10 (but you can use any range just by tweaking the code). If the score is between 0 and 3, the progress bar is red. Between 4 and 7 it is yellow, and between 8 and 10 it is green.

You can try it out here:

tech javascript

© 2020 Crafted with Metalsmith and deployed to a DigitalOcean VPS.