CSS only "coding" animation

I promised, I delivered (eventually). I shared my SVG coding loading animation a month or two ago on reddit's /r/webdev, and it went down fairly well. In my original post about how I built that animation, I talk about how support for SVG animations is being deprecated in many browsers and that I really should have built it with CSS only animations. Well, here it is :)

By the way, if you like this and want to learn how to do it yourself (it's actually easy), check out the tutorial here ;)

That's a GIF, but check out the GitHub repo for the CSS only loader, it loops forever!


I've made a few changes to the animation this time, I didn't just copy the original design. The most noticable change is that I picked colours based on Sublime text's Monokai colour theme. For me, those colours are coding, since I've used Sublime for years. Yes I've tried others, I always come back to Sublime, I think I'm getting old and stuck in my ways at the grand old age of 30.

Another change I've made is that the lines start to "code" a little earlier now, making it a bit more "flowy", as if a computer is generating the code as opposed to someone typing it.

Possible improvements to make

I think I'd like the option to resize it. At the moment the widths are fixed in pixel values. Ideally this would be a dynamic element that can just drop in anywhere and work. As it stands, that's not really the case, but this project/distraction was largely academic anyway, so it's fine.

You've successfully subscribed to Chris Dermody
Great! Next, complete checkout to get full access to all premium content.
Error! Could not sign up. invalid link.
Welcome back! You've successfully signed in.
Error! Could not sign in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.