When it comes to animations, as a programmer, you get to be a little creative. Just over a year ago I was working on a project where I needed a progress bar to be displayed on load. I wanted to have something like an wheel animation but that slowly filled up. I decided that I didn’t want to use canvas and so I started to investigate other avenues. Eventually, I decided that masking/clipping elements in HTML/CSS would be well supported, performant and fun. Using a combination of clip, border-radius and overflow I was able to get the desired effect. Check it out below:

Note: For this snippet I used Zach Johnson’s jQuery rotate & scale plugin. I could have gone ahead and used CSS transforms (rotate) instead but this was written over a year ago, so I’m cutting myself some slack. +Plus browser support was an issue at the time of creation .