Yesterday I scoured the web for an animated progress bar background. Not an animated progress bar, a background. I wanted the ability to control my progress bar length with CSS and Javascript. I found some stripey backgrounds and what not, but none of them were animated. Maybe my Google skills failed me, but I couldn’t find one for the life of me. So I decided to make my own in GIMP.

Once I figured out the steps, it was quite simple.

1. Start with a long solid color bar (I used 1000×25, which is probably overkill)
2. Add a transparent layer and fill it with the Warning pattern (yellow and black stripes)
3. Remove the yellow stripes via select by color, then change the opacity to something low (like 15%)
4. Add a third layer for a white gradient in the top half to make it shiny
5. Change the canvas size to 300×25 and align the layer to the right
6. Merge the three layers together
7. Copy the layer, move it 1 pixel to the right
8. Repeat until you have 20 layers, each 1 pixel further right than the previous one
9. Run the animation optimization filter, then save as animated GIF using 50ms delay
10. Drink a beer!

Here’s the GIMP file before merging layers, and here’s the one just before optimization. Please take them (or the image above) and do whatever the hell you want with them.

Here’s a German flag version for good measure.