Just a custom SVG loader animation

initLoader.js

    /**
     * SVG Loader
     * @template: '<div class="main-loader center" ng-show="showLoader"></div>'
    */
    var Paper = Snap(".main-loader");

    if (Paper !== null) {

      Snap.load("loader.svg", function ( f ) {
        Paper.append( f );

        var S = Paper.select("#sustain");
        var C = Paper.select("#consulting");

        var animOne = S.select("#animation-one");
        var animTwo = C.select("#animation-two");				

        function initAnimation (el, animEl, dur, dir) {

          var bb = el.getBBox();
          var cx = bb.x + ( bb.width / 2 );
          var cy = bb.y + ( bb.height / 2 );

          animEl.attr({
            attributeName: "transform",
            type: "rotate",
            from: "0 " + cx + " " + cy,
            to: 360 * dir + " " + cx + " " + cy,
            dur: dur + "s",
            repeatCount: "indefinite"
          });
        }

        initAnimation(S, animOne, 2, 1);
        initAnimation(C, animTwo, 3, -1);

      });
    }

loader.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="200" height="200" viewBox="0 0 22 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 40.2 (33826) - http://www.bohemiancoding.com/sketch -->
    <title>sustain-loader</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="sustain-loader" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g>
            <g>
                <g transform="translate(19.000000, 10.000000)">
                    <defs>
                        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:white;stop-opacity:1"></stop>
                            <stop offset="100%" style="stop-color:#0199B1;stop-opacity:1"></stop>
                        </linearGradient>
                        <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:white;stop-opacity:1"></stop>
                            <stop offset="100%" style="stop-color:#AE75CC;stop-opacity:1"></stop>
                        </linearGradient>
                    </defs>
                    <g id="Group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <ellipse id="sustain" stroke="url(#grad1)" stroke-width="6" cx="11" cy="11" rx="11" ry="11" transform="rotate(222 11 11)">
                            <animateTransform id="animation-one" attributeType="xml" attributeName="transform" type="rotate" from="0 11 11" to="360 11 11" dur="2s" repeatCount="indefinite"></animateTransform>                            
                        </ellipse>                        
                        <ellipse id="consulting" stroke="url(#grad2)" stroke-width="6" cx="11" cy="25" rx="11" ry="11" transform="rotate(-28 11 25)">
                            <animateTransform id="animation-two" attributeType="xml" attributeName="transform" type="rotate" from="0 11 25" to="-360 11 25" dur="3s" repeatCount="indefinite"></animateTransform>
                        </ellipse>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>