Rocket League Loading Screen
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!
I love the simplicity of the loading screen design for one of my favourite games Rocket League. So why not create a codepen dedicated to the screen itself? [codepen_embed height=400 theme_id=1 slug_hash='zwQqQW' user='JackDavies' default_tab='result' animations='run'] [/codepen_embed] See the Pen Rocket League Loading Screen by Jack Davies (@JackDavies) on CodePen
Introduction
#Even though this codepen looks simple enough, it did take me quite a while to figure out how I was going to create it and then pick out the perfect font. Imagery is courtesy of /r/RocketLeague and their amazing wallpaper packs! I first started out by trying to figure out a smart way of using the pseudo selectors
:after'to create the loading icon out of HTML elements. After faffing around studying other CSS loaders and the concepts behind them, I soon realised creating this warped three-point object would be next to impossible.Sticking to how it should be done.
#So after using half an hour of my time studying the cool and hip way of creating a CSS loader, I turned to my good old friend SVG (cue puppy love music). SVG allowed for the process to be quicker (not simple) and therefore save me time, with the sacrifice of being trendy like other CSS loader developers. With the object constructed I then exported the file as an SVG from Illustrator and loaded it into SVGOMG. With the image compressed and code copied, I headed over to my codepen and started piecing together the parts. The animation was easy enough, I even included cross-browser support for those wanting to copy and paste the code. Although it should have taken me an hour, I ended up throwing on an extra half hour trying to pick out a good image for contrast with white text, picking out the most similar font to that of the loading screen font and finally making this post sharing my creation with the world.
Conclusion
#The main lesson I learnt from this codepen was that even though everyone is trying to show off creating non-semantically correct code to show off what you can do with divs nested in 6 other divs, sometimes it's just easier to do it the way it's meant to be done. Food for thought?