Pure CSS Loader
Hey! Just so you know, this article is over 2 years old. Some of the information in it might be outdated, so take it with a grain of salt. I'm not saying it's not worth a read, but don't take everything in it as gospel. If you're curious about something, it never hurts to double-check with a more up-to-date source!
See the Pen Pure CSS Loader by Jack Davies(@JackDavies) on CodePen 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.