Radial progress indicators are one of the most pretentious things you could possibly put on your website.
It's like saying "Bars are not good enough for me! Let's have a huge circle, and waste space to show how good I am with web technologies!"
Well, if you're looking for something lightweight, animated and customizable that will do the job on IE9+, look no further.
I will be using the Roboto font a lot, so you might want to download it. The code will use whatever your current font is.
You are free to copy, modify and use this code as you wish.
All the bars shown here can scale accordingly to the font-size attribute and can be used in a responsive layout.
First, download the JS code.
Less than 4kb, and no frameworks required. Just the way I like it. It's basically a couple of calls to the Canvas.arc method, glorified with a bunch of settings and some really trivial animations, as you can see here:
First, import the .js file. Add this to your head tag.
Then, create an element for the bar in your body, such as a div.
Make sure to store it in a variable so you can control it later.
When created, the bar takes up 10em in both width and height. The font-size of the element can be changed to scale it.
The default style mimics the look of the Windows 10 upgrade progress indicator.
Optional parameters can be passed as an Object (not a JSON string!):
The main functions to control the progress bars are:
By default, the text inside the progress bar uses the current font. You can customize the text with CSS like this:
Style can be changed at any time, with instructions like:
This allows the creation of effects like the one shown in Example 8.
Browsers that don't support the canvas element will show nothing, or show only the text.
A fallback implementation using a linear progress bar or SVG could be implemented.
You may have noticed that this page disables the usual animated background. This is because I had to display several progress bars, some of which are animated.
These animations will redraw the bar at 60 frames per second, and that can be quite heavy on mobile devices, so you don't want to show too many bars at the same time, especially if they're big.
Using faster animations (or disabling them) will reduce the amount of work.
The current implementation will cover most modern scenarios, as it's perfect for a flat looking website, however it could use a few more settings to allow more effects to be applied so it can be used in other contexts as well.