Home/ Questions/Q 877017
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T11:32:08+00:00

I have a simple carousel to display some images. As you would expect the

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0