[codepen_embed height=500 theme_id=1 slug_hash='gmXbmj' user='JackDavies' default_tab='result' animations='run']

See the Pen Pure CSS Loader by Jack Davies(@JackDavies) on CodePen

[/codepen_embed]

I thought it'd been a while since my last codepen, so I decided to create a pure CSS loader.

This loader was fairly simple in concept but during development proved to be quite difficult. The original concept was to increase the size of the border and at the end fade it out to its start size. Unfortunately, when you increased the border width using CSS animations, it creates a jerky effect.

To combat the problem I was having, I used the translate scale property to affect the stroke width by scaling the overall object from a small height and width. This created a forward motion effect by accident, but I ended up really liking the effect and kept it in. In the starting and final frames of the animation, I have reduced the opacity to 0 to create a fade in and out effect too.

Overall I am happy with the end animation and it makes me want to see what else I can produce using pure CSS techniques.

Related Blog Posts