Home/ Questions/Q 7624235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T04:54:36+00:00

After looking through W3Schools I’m still not sure if this is possible or not.

  • 0

After looking through W3Schools I’m still not sure if this is possible or not.

The idea is to have the div be a progress bar. (Yes, I am aware of jQuery UI’s progress bar.) I would like it to start out 100% filled with one background-image, but overtime have it fill from 0%/100% to 100%/0%.

I see that it is possible to have multiple background images specified using css: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple

but I am not sure how to extend that logic to having only % widths. Any ideas? Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t set the width of a background image. But the solution is easy. The div by itself is the progress bar at 0% (so has the unloaded background image), then have another div inside that which is the actual progress (which animates from 0% to 100% and has the loaded background image). So you animate the width of the div inside the progress bar to represent progress.

    • 0