Animation comparisons.

A brief study into animation technologies for the web. Check out this more in-depth article here.

SVG

Simple SVG-only animation

For simple loaders I think this is a great technology. The bugbear is IE & Edge as there is no support for either browser yet &, although Chrome do support it they did deprecate it at one point. The markup controls the movement, no CSS or JS involvement at all.

Pros: Great performance, nice workflow - export your SVG code directly from sketch or illustrator clean it up with SVGOMG. Add in your animation rules and away you go.

Cons: Markup is pretty hideous, it's good to use the <object /> tag for SVGs to keep them clean. Potentially deprecated technology, although there are some discussions whether to keep it.

Browser support >

SVG loader

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 50 50" path d="M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.5s" repeatCount="indefinite"/></path></svg>

SVG & CSS keyframe animation

Using transitions to spin vector graphics

This seems to be the most preferred and recommended way to create animations. And using keyframes does give you access to much more complicated animations.

Pros: Just as performant as SVG SMIL. Keyframes are more commonly used that SMIL so there are much more resources online.

Cons: I find keyframes quite cumbersome and easy to get out of hand with more complex animations.

Amazing use of the SVG filter >

SVG loader with CSS keyframe animation

<svg xmlns="http://www.w3.org/2000/svg" class"loader--spin" width="200" height="200" viewBox="0 0 50 50" path d="M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z"></path></svg>

<style>
    .loader--spin {
        animation-name: spinning;
        animation-direction: normal;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        animation-duration: 0.5s;
        animation-timing-function: linear;
    }

    @keyframes spinning {
        0% {
            transform: rotate(0deg)
        }
        100% {
            transform: rotate(360deg)
        }
    }
</style>

Canvas

I dislike the canvas element

The <canvas /> is an all round bad guy. So much to learn and for what? A rasterized rectangle with no possibility of debugging (in Chrome)?

Pros: Fair enough, the performance is brilliant.

Cons: It's really hard. Rasterizing is a step backwards (although I realise this is not the use case for using the canvas).

Super cool musical canvas thing >

Canvas loader

<canvas id="canvas--loader" height="200" width="200" class="loader--spin loader--object loader--light-grey loader--canvas"></canvas>

<script>
var canvasLoader = document.getElementById('canvas--loader'),
    d = canvasLoader.width = canvasLoader.height = 120,
    ctxLoader = canvasLoader.getContext('2d'),
    opacity;

    ctxLoader.translate(d/2, d/2);
    ctxLoader.rotate(Math.PI * 360/360);
    ctxLoader.lineWidth = 4;
    ctxLoader.lineCap = 'butt';

    for(var i = 0; i <= 360; i++) {
        ctxLoader.save();
        ctxLoader.rotate((Math.PI * i/180));
        ctxLoader.beginPath();
        ctxLoader.moveTo(0, 0);
        opacity = (360 - (i * 1)) / 360;
        ctxLoader.strokeStyle = 'rgba(255,255,255,' + opacity.toFixed(2) +')'; 
        ctxLoader.lineTo(0, d + 30);
        ctxLoader.stroke();
        ctxLoader.closePath();
        ctxLoader.restore();
    }

    ctxLoader.globalCompositeOperation ='source-out';
    ctxLoader.beginPath();
    ctxLoader.arc(0, 0, d/2, 2 * Math.PI, false);
    ctxLoader.fillStyle = '#000';
    ctxLoader.fill();

    ctxLoader.globalCompositeOperation ='destination-out';
    ctxLoader.beginPath();
    ctxLoader.arc(0, 0, (d/2) * .9, 2 * Math.PI, false); 
    ctxLoader.fill();
</script>

<style>
.loader--object {
    width: 20rem;
    height: 20rem;
    border-radius: 99999rem
}

.loader--light-grey {
    background-color: #d3d3d3
}

.loader--spin {
    animation-name: spinning;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-duration: .5s;
    animation-timing-function: linear
}

.loader--canvas {
    padding: 5rem
}

@keyframes spinning {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
</style>