Circular Progress Indicator in Javascript

Question

I have a simple carousel to display some images. As you would expect the carousel auto rotates every x seconds.

I currently have a div which I animate the width over the x seconds to show progress. This allows users to see how long they have to wait until the next image is displayed. When a user hovers over the image, the progress bar shrinks. When they mouse out, it begins to fill again.

However, rather than use a boring bar, I wanted to try and use a circle. Kind of like a spinning circle you see whilst ajax is loading. I have no idea how to do this.

Can anyone help? Is it even possible?

Answer 1

Generate a series of images representing the different degrees you'd like to represent, making the distinctions as fine-grained as you'd like. You could make four images representing 0%, 25%, 75%, and 100% "progress" or a hundred images representing each 1% difference.

In JavaScript, rather than changing the width of a bar, you can then swap in the appropriate image for the current amount of progress. if (progress < 25) image = '0percent.png'; (et cetera).

Doing this without using images would be possible on some modern browsers with HTML 5 support, but entirely impractical anywhere else.

Note that this is quite different than the standard "loading" graphic. Those spinners do not represent progress at all, since they just spin repeatedly until the document loads. Spinners are therefore made as animated GIFs, so a single image can simply sit on the page, spinning merrily, until it's removed.

Answer 2

To avoid the clutter of n gifs/pngs for every step of the progress indicator, create a single sprite of all the steps and stack them up horizontally or vertically (e.g. if your progress indicator is 40x40 and you want to show 8 steps, create a 320x40 image, and put them by increasing value back-to-back from left to right).

Create a new element with its dimensions fixed to a single step's size (40x40 in the example) and put this sprite as its background image.

Then when you receive the ticks from the Timer (or setTimeout/Interval), shift the background-image's position-x property by one size (0, 40, 80, 120, etc.).

This is much faster than having a separate image for every step and the end-user immediately pre-loads the entire sprite on the first event.