Home

Animated SVG Loading Image

For a while we’ve been using a generic spinning GIF for the loading images in Clypboard. You know, the type you can create easily with an online tool:

ajax-loader-primary.gif

This worked alright, but I wanted a bit more polish on the user interface. Since we only need to support modern browsers for Clypboard, I decided to try an animated SVG graphic.

I started out by making a simple clipboard image in Sketch:

Screenshot_2015-11-28_18.52.58.png

Once exported to SVG, you can use CSS animations to animate the elements of the image. In this case, I want the lines on the clipboard to fly in from the left side of the image, stay in place for a second, then fly out to the right. This is done using a keyframes animation with translate transforms:

@keyframes slide-in-out {
    0%   { transform: translate(-300px, 0); }
    25%   { transform: translate(0px, 0); }
    75%   { transform: translate(0px, 0); }
    100%   { transform: translate(300px, 0); }
}
#line-1 {
    animation: slide-in-out 2s infinite;
    animation-delay: 0s;
}
#line-2 {
    animation: slide-in-out 2s infinite;
    animation-delay: 0.2s;
}
#line-3 {
    animation: slide-in-out 2s infinite;
    animation-delay: 0.4s;
}
#line-4 {
    animation: slide-in-out 2s infinite;
    animation-delay: 0.6s;
}
 #line-5 {
    animation: slide-in-out 2s infinite;
    animation-delay: 0.8s;
}


The CSS can be placed directly in a <style> element in the SVG document. As you can see, the line elements are referenced by id, where the id is the name of the element in Sketch. By staggering the animation delays, the lines appear to slide in with a nice sweeping motion.

The result is a smooth animation that fits in a tiny document and is rendered with pixel perfection (even on high density displays):

clipboard-loader-bg.svg