Javascript circular progress indicator

Question

I have a simple carousel to display some images. As expected, the carousel automatically rotates every x seconds.

I currently have a div for which I change the width in x seconds to show progress. This allows users to see how much time they need to wait until the next image is displayed. When the user hovers over the image, the progress bar is compressed. When they go out, it starts to fill again.

However, instead of using a boring bar, I wanted to try using a circle. It looks like a spinning circle that you see while the ajax is loading. I do not know how to do that.

Can anyone help? Is it possible?

Answer 1

Create a series of images representing the various degrees that you want to present, making the differences as small as you would like. You can make four images representing 0%, 25%, 75% and 100% "progress" or one hundred images representing each 1% difference.

In JavaScript, instead of changing the width of the strip, you can then swap the place in the corresponding image to the current level of progress. if (progress < 25) image = '0percent.png'; (etc).

Doing this without the use of images is possible in some modern browsers with HTML 5 support, but completely impractical anywhere.

Please note that this is not at all like the standard download graphics. These spinners do not represent progress at all, as they simply rotate several times until the document loads. Thus, Spinners are created in the form of animated GIF files, so a single image can simply sit on the page, spinning merrily, until it is deleted.

Answer 2

To avoid clutter n gifs / png for each step of the progress indicator, create one sprite of all the steps and place them horizontally or vertically (for example, if the progress indicator is 40x40 and you want to show 8 steps, create a 320x40 image and place them, increasing the value back and back from left to right).

Create a new element with the dimensions set to one step (40x40 in the example) and place this sprite as the background image.

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

This is much faster than having a separate image for each step, and the end user immediately preloads the entire sprite in the first event.

Answer 3

You can use SVG or canvas.

There are also libraries that can do this (like this ?)

Answer 4

You inspired me to create a manual progress indicator. I made a demo here here . Then I started tweeking and decided to turn it into a plugin. The plugin includes a timer, as well as several other options. Check out the demo version of the plugin , maybe this will work for you?