I've been a subscriber to Marques Brownlee (MKBHD) for a few years now, his tech videos are always on point, free from hype and other nonsense that can plague YouTube recently. If you like tech and don't know him, go subscribe now. Anyways, after recently hitting the 1,000 video milestone, I had a poke around his merch site, and noticed his logo might be a good candidate for a loading animation.
If you'd like to learn how to make something like this with CSS, subscribe at the bottom of the page, or on this page so you don't miss the tutorial, coming as soon as I clean up the code ;)
My last loading icon was the "coding" animation I built for myDevPortfol.io. It was simply an animation that starts and loops indefinitely until eventually it just goes away when the content is loaded. With MKBHD's logo, however, I thought I could do something a little more interesting.
Loading animations for "known" and "unknown" states
This time, I thought I could use the elements in the logo to act as a sort-of progress bar, which would display how far along the loading process is. This is for stuff like file uploads and downloads etc. What I came up with was the below animation.
For the situation where we won't know the progress of the loading, I created a version that is reminiscent of Knight Rider.
I'm pretty happy with this. It took some experimentation to get the easing that looked good but in the end it was just the standard
I'm also using
transform where I can to make sure that those animations are as buttery smooth as possible. Check out the codepens below.
Would you like a tutorial?
I really enjoy playing around with these CSS animations, and I think they can bring a lot of life to an otherwise boring thing - a web page loading. Let me know if you'd like a tutorial for this by subscribing below and replying to the intro email as to what you'd like to see. I use Sketch to build the SVG elements I need, and so far I haven't shared my workflow for it. Would that be something you'd like?
Let me know