A collection of subtle loading effects using CSS transforms and animations
Ever since Destiny launched on PS4 last month, I’ve been using the PSN app and website a fair bit. Yesterday morning, while browsing on my mobile, I came across a small loading animation used on the mobile site that I really liked; so much so, that I decided to recreate it myself.
The thing is, as I started to recreate it, I realised there were loads of variations on the same theme that could be put together easily by changing just a few lines of CSS. So I made some more variations based on that initial theme.
Check out the result on Codepen.
All of the examples use a simple combination of CSS3 transforms and animation. The thing I like about them is that they are nice and subtle, especially when browsing on a mobile device.
I’ve tried to make the demo quite variable driven, so play around with the values at the top of the CSS and see how it affects the animations.
I’m sure there are even more variations based on a simple row of 6 squares animating – if you have any ideas, fork the code and play around with it. I’d love to see what other people can come up with and I’ll link to any other good examples here.
Article posted on the 8th October 2014