SVG Loader Example 1 (using SMIL animations)

AnimatedLoaderComp.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g transform="translate(150,150)">
        <rect id="r" x="50" y="-10" height="20" width="75" rx="10" fill="#0000ff" opacity="1">
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="330;300;270;240;210;180;150;120;90;60;30" repeatCount="indefinite" calcMode="discrete" />
        </rect>
        <rect id="r" x="50" y="-10" height="20" width="71.25" rx="10" fill="#0000ff" opacity=".9"  transform="rotate(30)" >
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="0;330;300;270;240;210;180;150;120;90;60" repeatCount="indefinite" calcMode="discrete" />
        </rect>
        <rect id="r" x="50" y="-10" height="20" width="67.5" rx="10" fill="#0000ff" opacity=".8"  transform="rotate(60)"  >
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="30;0;330;300;270;240;210;180;150;120;90;" repeatCount="indefinite" calcMode="discrete" />
        </rect>
        <rect id="r" x="50" y="-10" height="20" width="63.75" rx="10" fill="#0000ff" opacity=".7"  transform="rotate(90)" >
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="60;30;0;330;300;270;240;210;180;150;120" repeatCount="indefinite" calcMode="discrete" />
        </rect>
        <rect id="r" x="50" y="-10" height="20" width="60" rx="10" fill="#0000ff" opacity=".6"  transform="rotate(120)"  >
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="90;60;30;0;330;300;270;240;210;180;150" repeatCount="indefinite" calcMode="discrete" />
        </rect>
        <rect id="r" x="50" y="-10" height="20" width="56.25" rx="10" fill="#0000ff" opacity=".5"  transform="rotate(150)" >
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="120;90;60;30;0;330;300;270;240;210;180" repeatCount="indefinite" calcMode="discrete" />
        </rect>
        <rect id="r" x="50" y="-10" height="20" width="52.5" rx="10" fill="#0000ff" opacity=".4"  transform="rotate(180)" >
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="150;120;90;60;30;0;330;300;270;240;210" repeatCount="indefinite" calcMode="discrete" />
        </rect>
        <rect id="r" x="50" y="-10" height="20" width="48.75" rx="10" fill="#0000ff" opacity=".35"  transform="rotate(210)" >
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="180;150;120;90;60;30;0;330;300;270;240" repeatCount="indefinite" calcMode="discrete" />
        </rect>
        <rect id="r" x="50" y="-10" height="20" width="45" rx="10" fill="#0000ff" opacity=".3"  transform="rotate(240)" >
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="210;180;150;120;90;60;30;0;330;300;270" repeatCount="indefinite" calcMode="discrete" />
        </rect>
        <rect id="r" x="50" y="-10" height="20" width="41.25" rx="10" fill="#0000ff" opacity=".25" transform="rotate(270)" >
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="240;210;180;150;120;90;60;30;0;330;300" repeatCount="indefinite" calcMode="discrete" />
        </rect>
        <rect id="r" x="50" y="-10" height="20" width="37.5" rx="10" fill="#0000ff" opacity=".2"  transform="rotate(300)"  >
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="270;240;210;180;150;120;90;60;30;0;330" repeatCount="indefinite" calcMode="discrete" />
        </rect>
        <rect id="r" x="50" y="-10" height="20" width="33.75" rx="10" fill="#0000ff" opacity=".15" transform="rotate(330)" >
            <animate attributeName="fill" attributeType="XML" values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;" begin="0s" dur="6s" calcMode="paced" fill="freeze" repeatCount="indefinite"/>
            <animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" values="300;270;240;210;180;150;120;90;60;30;0;" repeatCount="indefinite" calcMode="discrete" />
        </rect>
    </g>
</svg>