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 know how to make things like this yoursel, I've created a tutorial over here. Subscribe at the bottom of the page, or on this page so you don't miss the more ;)
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.
I'm using the scaleX() CSS property to flip the white element around, fading it out, and then progressively fading in the white progress bars as the loading completes using some JavaScript (jQuery) to apply the relevant classes.
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 ease property.
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.
See the Pen mk1 by Chris Dermody (@ChipD) on CodePen.
See the Pen mk1 infinite nightrider by Chris Dermody (@ChipD) on CodePen.
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
Update: I've actually gone ahead and made a tutorial here, let me know what you think.
