I challenge you!

I Challenge You

After reading the very good article from cssanimation.rocks about the loading animation for buffer, one of my colleages (a very talented ux designer) challenged me to create do the same for our company; Lane Crawford.

Lane Crawford is a luxury fashion retail brand, and it is supposed to ooze elegance, so I wanted to create something which was suave, but subtle. It should just be and exist without making much noise. So I created this "rolling breath" animation which doesn't scream at you. -- I experimented with a couple of speeds, and also colours.


I am not familiar with SVG at all, but it looks like a very powerful, emerging and future technology. Through my time reading articles it appears to be well supported from IE10+ but has quite a few browser-quirks and difficulties associated with it. However the power and flexibility of SVG cannot be denied.

So as I do not have much SVG knowledge, the SVG code is pretty basic. But some of the interesting features are the scss lists, and loops;

  $lanecrawford: "l","a","n","e","c","r","a2","w","f","o","r2","d";

I create a list, containing all the letters of the logo, and these correspond to the css-class added to each letter's <path> in the SVG.

Then I reference this list, and loop through it to create the animation-delay for each character so that I do not set the delays manually for each letter;

  @each $letter in $lanecrawford {
    $i: index($lanecrawford, $letter);
    $t: 0.035s * $i;

    &.loading path.#{$letter} {
        animation-delay: $t;

I'm not sure we will ever use this at the company, but it was a nice experiment and I think it looks a lot nicer than the circle-gifs that are used on most websites.

also posted on my blog

2,687 2 18