Workshop 1.

A throbber is an animation that indicates progress or loading. Unlike a progress bar, it does not convey how much of the action has been completed.

View some example throbbers or read the its history.


  1. Choose one of the following words: puddle, correspondence, fountain, frozen, ghost, bubble, bug, cow, snow. Use this word as inspiration in creating your custom throbber.

  2. Create your throbber. Your throbber must be .GIF format, 100 x 100px, and have at least 8 animation frames. You may wish to complete this using Photoshop, a useful image editing tool. (Here is a tutorial on making an animated gif.) If you want to use vector shapes, create them in Illustrator or InDesign and copy and paste into Photoshop.

  3. Create a new HTML page within your class website. You can title it "throbber.html". Use the image tag to insert your throbber onto the page.

  4. Place a link to your throbber page on your class homepage.


View created throbbers.

Updated on July 11, 2016