oda-framework/tools/icons/lib/svg/loaders.html

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

<template name="loaders" icon="spin" size="100">
    <g id="spin" size="24">

        <path d="M18.7 12.4c-.28-.16-.57-.29-.86-.4.29-.11.58-.24.86-.4 1.92-1.11 2.99-3.12 3-5.19-1.79-1.03-4.07-1.11-6 0-.28.16-.54.35-.78.54.05-.31.08-.63.08-.95 0-2.22-1.21-4.15-3-5.19C10.21 1.85 9 3.78 9 6c0 .32.03.64.08.95-.24-.2-.5-.39-.78-.55-1.92-1.11-4.2-1.03-6 0 0 2.07 1.07 4.08 3 5.19.28.16.57.29.86.4-.29.11-.58.24-.86.4-1.92 1.11-2.99 3.12-3 5.19 1.79 1.03 4.07 1.11 6 0 .28-.16.54-.35.78-.54-.05.32-.08.64-.08.96 0 2.22 1.21 4.15 3 5.19 1.79-1.04 3-2.97 3-5.19 0-.32-.03-.64-.08-.95.24.2.5.38.78.54 1.92 1.11 4.2 1.03 6 0-.01-2.07-1.08-4.08-3-5.19zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z" class="style-scope iron-icon"></path>

        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s" repeatCount="indefinite"></animateTransform>
        </path>
    </g>

    <g  id="puff" size="44" >
        <g fill="none" fill-rule="evenodd" stroke-width="2">
            <circle cx="22" cy="22" r="1" stroke="#03a">
                <animate attributeName="r"
                         begin="0s" dur="1.8s"
                         values="1; 20"
                         calcMode="spline"
                         keyTimes="0; 1"
                         keySplines="0.165, 0.84, 0.44, 1"
                         repeatCount="indefinite" ></animate>
                <animate attributeName="stroke-opacity"
                         begin="0s" dur="1.8s"
                         values="1; 0"
                         calcMode="spline"
                         keyTimes="0; 1"
                         keySplines="0.3, 0.61, 0.355, 1"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="22" cy="22" r="1" stroke="#0a3">
                <animate attributeName="r"
                         begin="-0.9s" dur="1.8s"
                         values="1; 20"
                         calcMode="spline"
                         keyTimes="0; 1"
                         keySplines="0.165, 0.84, 0.44, 1"
                         repeatCount="indefinite" ></animate>
                <animate attributeName="stroke-opacity"
                         begin="-0.9s" dur="1.8s"
                         values="1; 0"
                         calcMode="spline"
                         keyTimes="0; 1"
                         keySplines="0.3, 0.61, 0.355, 1"
                         repeatCount="indefinite" ></animate>
            </circle>
        </g>
    </g>


    <g id="circles" size="135">
        <path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z">
            <animateTransform
                    attributeName="transform"
                    type="rotate"
                    from="0 67 67"
                    to="-360 67 67"
                    dur="2.5s"
                    repeatCount="indefinite"></animateTransform>
        </path>
        <path d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z">
            <animateTransform
                    attributeName="transform"
                    type="rotate"
                    from="0 67 67"
                    to="360 67 67"
                    dur="8s"
                    repeatCount="indefinite"></animateTransform>
        </path>
    </g>

    <g id="loader" size="100">

        <circle fill="none" stroke="#0a3" stroke-width="6" stroke-miterlimit="15" stroke-dasharray="14.2472,14.2472" cx="50" cy="50" r="47" >
            <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    dur="5s"
                    from="0 50 50"
                    to="360 50 50"
                    repeatCount="indefinite" ></animateTransform>
        </circle>
        <circle fill="none" stroke="#0a3" stroke-width="1" stroke-miterlimit="10" stroke-dasharray="10,10" cx="50" cy="50" r="39">
            <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    dur="5s"
                    from="0 50 50"
                    to="-360 50 50"
                    repeatCount="indefinite" ></animateTransform>
        </circle>
        <g>
            <rect x="30" y="35" width="5" height="30">
                <animateTransform
                        attributeName="transform"
                        dur="1s"
                        type="translate"
                        values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite"
                        begin="0.1"></animateTransform>
            </rect>
            <rect x="40" y="35" width="5" height="30" >
                <animateTransform
                        attributeName="transform"
                        dur="1s"
                        type="translate"
                        values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite"
                        begin="0.2"></animateTransform>
            </rect>
            <rect x="50" y="35" width="5" height="30" >
                <animateTransform
                        attributeName="transform"
                        dur="1s"
                        type="translate"
                        values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite"
                        begin="0.3"></animateTransform>
            </rect>
            <rect x="60" y="35" width="5" height="30" >
                <animateTransform
                        attributeName="transform"
                        dur="1s"
                        type="translate"
                        values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite"
                        begin="0.4"></animateTransform>
            </rect>
            <rect x="70" y="35" width="5" height="30" >
                <animateTransform
                        attributeName="transform"
                        dur="1s"
                        type="translate"
                        values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite"
                        begin="0.5"></animateTransform>
            </rect>
        </g>

    </g>


    <!-- Loader 2 -->

    <g id="clock" size="100" stroke="#fff" >
        <circle stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48"></circle>
        <line stroke-linecap="round"  stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
            <animateTransform
                    attributeName="transform"
                    dur="2s"
                    type="rotate"
                    from="0 50 50"
                    to="360 50 50"
                    repeatCount="indefinite" ></animateTransform>
        </line>
        <line stroke-linecap="round" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
            <animateTransform
                    attributeName="transform"
                    dur="15s"
                    type="rotate"
                    from="0 50 50"
                    to="360 50 50"
                    repeatCount="indefinite" ></animateTransform>
        </line>
    </g>


    <!-- Loader 3 -->

    <g id="dot" size="100">
        <circle fill="none" stroke="#888" stroke-width="4" cx="50" cy="50" r="44" style="opacity:0.5;"></circle>
        <circle stroke="#e74c3c" fill="none" stroke-width="3" cx="8" cy="54" r="6" >
            <animateTransform
                    attributeName="transform"
                    dur="2s"
                    type="rotate"
                    from="0 50 48"
                    to="360 50 52"
                    repeatCount="indefinite" ></animateTransform>

        </circle>
    </g>


    <!-- Loader 4 -->

    <g id="horizontal-dots" size="100">
        <circle stroke="none" cx="6" cy="50" r="6">
            <animate
                    attributeName="opacity"
                    dur="1s"
                    values="0;1;0"
                    repeatCount="indefinite"
                    begin="0.1"></animate>
        </circle>
        <circle stroke="none" cx="26" cy="50" r="6">
            <animate
                    attributeName="opacity"
                    dur="1s"
                    values="0;1;0"
                    repeatCount="indefinite"
                    begin="0.2"></animate>
        </circle>
        <circle stroke="none" cx="46" cy="50" r="6">
            <animate
                    attributeName="opacity"
                    dur="1s"
                    values="0;1;0"
                    repeatCount="indefinite"
                    begin="0.3"></animate>
        </circle>
    </g>

    <!-- Loader 5 -->

    <g id="wave-dots" size="100">
        <circle stroke="none" cx="6" cy="50" r="6">
            <animateTransform
                    attributeName="transform"
                    dur="1s"
                    type="translate"
                    values="0 15 ; 0 -15; 0 15"
                    repeatCount="indefinite"
                    begin="0.1"></animateTransform>
        </circle>
        <circle stroke="none" cx="30" cy="50" r="6">
            <animateTransform
                    attributeName="transform"
                    dur="1s"
                    type="translate"
                    values="0 10 ; 0 -10; 0 10"
                    repeatCount="indefinite"
                    begin="0.2"></animateTransform>
        </circle>
        <circle stroke="none" cx="54" cy="50" r="6">
            <animateTransform
                    attributeName="transform"
                    dur="1s"
                    type="translate"
                    values="0 5 ; 0 -5; 0 5"
                    repeatCount="indefinite"
                    begin="0.3"></animateTransform>
        </circle>
    </g>


    <!--&lt;!&ndash; Loader 6 &ndash;&gt;-->

    <g id="box" size="100">
        <rect stroke-width="4" x="25" y="25" width="50" height="50" fill="none">
            <animateTransform
                    attributeName="transform"
                    dur="0.5s"
                    from="0 50 50"
                    to="180 50 50"
                    type="rotate"
                    id="strokeBox"
                    attributeType="XML"
                    begin="rectBox.end"></animateTransform>
        </rect>
        <rect x="27" y="27" width="46" height="50">
            <animate
                    attributeName="height"
                    dur="1.3s"
                    attributeType="XML"
                    from="50"
                    to="0"
                    id="rectBox"
                    fill="freeze"
                    begin="0s;strokeBox.end"></animate>
        </rect>
    </g>

    <!-- Loader 7 -->

    <g id="segments" size="100">
        <path d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
  c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
            <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    dur="2s"
                    from="0 50 50"
                    to="360 50 50"
                    repeatCount="indefinite" ></animateTransform>
        </path>
        <path  d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
  c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
            <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    dur="1s"
                    from="0 50 50"
                    to="-360 50 50"
                    repeatCount="indefinite" ></animateTransform>
        </path>
        <path d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
  L82,35.7z">
            <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    dur="2s"
                    from="0 50 50"
                    to="360 50 50"
                    repeatCount="indefinite" ></animateTransform>
        </path>
    </g>

    <!-- Loader 8 -->

    <g id="equalizer">
        <rect width="3" height="100" transform="translate(0) rotate(180 3 50)">
            <animate
                    attributeName="height"
                    attributeType="XML"
                    dur="1s"
                    values="30; 100; 30"
                    repeatCount="indefinite"></animate>
        </rect>
        <rect x="17" width="3" height="100" transform="translate(0) rotate(180 20 50)">
            <animate
                    attributeName="height"
                    attributeType="XML"
                    dur="1s"
                    values="30; 100; 30"
                    repeatCount="indefinite"
                    begin="0.1s"></animate>
        </rect>
        <rect x="40" width="3" height="100" transform="translate(0) rotate(180 40 50)">
            <animate
                    attributeName="height"
                    attributeType="XML"
                    dur="1s"
                    values="30; 100; 30"
                    repeatCount="indefinite"
                    begin="0.3s"></animate>
        </rect>
        <rect x="60" width="3" height="100" transform="translate(0) rotate(180 58 50)">
            <animate
                    attributeName="height"
                    attributeType="XML"
                    dur="1s"
                    values="30; 100; 30"
                    repeatCount="indefinite"
                    begin="0.5s"></animate>
        </rect>
        <rect x="80" width="3" height="100" transform="translate(0) rotate(180 76 50)">
            <animate
                    attributeName="height"
                    attributeType="XML"
                    dur="1s"
                    values="30; 100; 30"
                    repeatCount="indefinite"
                    begin="0.1s"></animate>
        </rect>
    </g>


    <!-- Loader 9 -->

    <g id="lines">
        <rect x="20" y="50" width="4" height="10">
            <animateTransform attributeType="xml"
                              attributeName="transform" type="translate"
                              values="0 0; 0 20; 0 0"
                              begin="0" dur="0.6s" repeatCount="indefinite" ></animateTransform>
        </rect>
        <rect x="30" y="50" width="4" height="10">
            <animateTransform attributeType="xml"
                              attributeName="transform" type="translate"
                              values="0 0; 0 20; 0 0"
                              begin="0.2s" dur="0.6s" repeatCount="indefinite" ></animateTransform>
        </rect>
        <rect x="40" y="50" width="4" height="10">
            <animateTransform attributeType="xml"
                              attributeName="transform" type="translate"
                              values="0 0; 0 20; 0 0"
                              begin="0.4s" dur="0.6s" repeatCount="indefinite" ></animateTransform>
        </rect>
    </g>


    <!-- Loader 10 -->

    <g id="half-circle">
        <path d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
            <animateTransform
                    attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    dur="1s"
                    from="0 50 50"
                    to="360 50 50"
                    repeatCount="indefinite" ></animateTransform>
        </path>
    </g>

    <g size="80" id="audio">
        <g transform="matrix(1 0 0 -1 0 80)">
            <rect width="10" height="20" rx="3">
                <animate attributeName="height"
                         begin="0s" dur="4.3s"
                         values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </rect>
            <rect x="15" width="10" height="80" rx="3">
                <animate attributeName="height"
                         begin="0s" dur="2s"
                         values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </rect>
            <rect x="30" width="10" height="50" rx="3">
                <animate attributeName="height"
                         begin="0s" dur="1.4s"
                         values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </rect>
            <rect x="45" width="10" height="30" rx="3">
                <animate attributeName="height"
                         begin="0s" dur="2s"
                         values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </rect>
        </g>
    </g>

    <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
    <!-- Todo: add easing -->

    <g id="ball-triangle" size="57" fill="none" fill-rule="evenodd">
        <g transform="translate(1 1)" stroke-width="2">
            <circle cx="5" cy="50" r="5" stroke="#0a3">
                <animate attributeName="cy"
                         begin="0s" dur="2.2s"
                         values="50;5;50;50"
                         calcMode="linear"
                         repeatCount="indefinite" ></animate>
                <animate attributeName="cx"
                         begin="0s" dur="2.2s"
                         values="5;27;49;5"
                         calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="27" cy="5" r="5" stroke="#03a">
                <animate attributeName="cy"
                         begin="0s" dur="2.2s"
                         from="5" to="5"
                         values="5;50;50;5"
                         calcMode="linear"
                         repeatCount="indefinite" ></animate>
                <animate attributeName="cx"
                         begin="0s" dur="2.2s"
                         from="27" to="27"
                         values="27;49;5;27"
                         calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="49" cy="50" r="5" stroke="#a30">
                <animate attributeName="cy"
                         begin="0s" dur="2.2s"
                         values="50;50;5;50"
                         calcMode="linear"
                         repeatCount="indefinite" ></animate>
                <animate attributeName="cx"
                         from="49" to="49"
                         begin="0s" dur="2.2s"
                         values="49;5;27;49"
                         calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
        </g>
    </g>
    <g size="140" id="bars">
        <rect y="10" width="15" height="120" rx="6">
            <animate attributeName="height"
                     begin="0.5s" dur="1s"
                     values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
                     repeatCount="indefinite" ></animate>
            <animate attributeName="y"
                     begin="0.5s" dur="1s"
                     values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </rect>
        <rect x="30" y="10" width="15" height="120" rx="6">
            <animate attributeName="height"
                     begin="0.25s" dur="1s"
                     values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
                     repeatCount="indefinite" ></animate>
            <animate attributeName="y"
                     begin="0.25s" dur="1s"
                     values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </rect>
        <rect x="60" width="15" height="140" rx="6">
            <animate attributeName="height"
                     begin="0s" dur="1s"
                     values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
                     repeatCount="indefinite" ></animate>
            <animate attributeName="y"
                     begin="0s" dur="1s"
                     values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </rect>
        <rect x="90" y="10" width="15" height="120" rx="6">
            <animate attributeName="height"
                     begin="0.25s" dur="1s"
                     values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
                     repeatCount="indefinite" ></animate>
            <animate attributeName="y"
                     begin="0.25s" dur="1s"
                     values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </rect>
        <rect x="120" y="10" width="15" height="120" rx="6">
            <animate attributeName="height"
                     begin="0.5s" dur="1s"
                     values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
                     repeatCount="indefinite" ></animate>
            <animate attributeName="y"
                     begin="0.5s" dur="1s"
                     values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </rect>
    </g>

    <g size="105" id="grid">
        <circle cx="12.5" cy="12.5" r="12.5">
            <animate attributeName="fill-opacity"
                     begin="0s" dur="1s"
                     values="1;.2;1" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </circle>
        <circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">
            <animate attributeName="fill-opacity"
                     begin="100ms" dur="1s"
                     values="1;.2;1" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </circle>
        <circle cx="52.5" cy="12.5" r="12.5">
            <animate attributeName="fill-opacity"
                     begin="300ms" dur="1s"
                     values="1;.2;1" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </circle>
        <circle cx="52.5" cy="52.5" r="12.5">
            <animate attributeName="fill-opacity"
                     begin="600ms" dur="1s"
                     values="1;.2;1" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </circle>
        <circle cx="92.5" cy="12.5" r="12.5">
            <animate attributeName="fill-opacity"
                     begin="800ms" dur="1s"
                     values="1;.2;1" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </circle>
        <circle cx="92.5" cy="52.5" r="12.5">
            <animate attributeName="fill-opacity"
                     begin="400ms" dur="1s"
                     values="1;.2;1" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </circle>
        <circle cx="12.5" cy="92.5" r="12.5">
            <animate attributeName="fill-opacity"
                     begin="700ms" dur="1s"
                     values="1;.2;1" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </circle>
        <circle cx="52.5" cy="92.5" r="12.5">
            <animate attributeName="fill-opacity"
                     begin="500ms" dur="1s"
                     values="1;.2;1" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </circle>
        <circle cx="92.5" cy="92.5" r="12.5">
            <animate attributeName="fill-opacity"
                     begin="200ms" dur="1s"
                     values="1;.2;1" calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </circle>
    </g>

    <g size="140" id="hearts">
        <path d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z" fill-opacity=".5">
            <animate attributeName="fill-opacity"
                     begin="0s" dur="1.4s"
                     values="0.5;1;0.5"
                     calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </path>
        <path d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z" fill-opacity=".5">
            <animate attributeName="fill-opacity"
                     begin="0.7s" dur="1.4s"
                     values="0.5;1;0.5"
                     calcMode="linear"
                     repeatCount="indefinite" ></animate>
        </path>
        <path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z" ></path>
    </g>

    <g size="38" id="oval">
        <g fill="none" fill-rule="evenodd">
            <g transform="translate(1 1)" stroke-width="2">
                <circle stroke-opacity=".5" cx="18" cy="18" r="18"></circle>
                <path stroke="#0a3" d="M36 18c0-9.94-8.06-18-18-18">
                    <animateTransform
                            attributeName="transform"
                            type="rotate"
                            from="0 18 18"
                            to="360 18 18"
                            dur="1s"
                            repeatCount="indefinite"></animateTransform>
                </path>
            </g>
        </g>
    </g>
    <g size="45" id="rings">
        <g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2">
            <circle cx="22" cy="22" r="6" stroke-opacity="0" stroke="#0a3">
                <animate attributeName="r"
                         begin="1.5s" dur="3s"
                         values="6;22"
                         calcMode="linear"
                         repeatCount="indefinite" ></animate>
                <animate attributeName="stroke-opacity"
                         begin="1.5s" dur="3s"
                         values="1;0" calcMode="linear"
                         repeatCount="indefinite" ></animate>
                <animate attributeName="stroke-width"
                         begin="1.5s" dur="3s"
                         values="2;0" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="22" cy="22" r="6" stroke-opacity="0" stroke="#03a">
                <animate attributeName="r"
                         begin="3s" dur="3s"
                         values="6;22"
                         calcMode="linear"
                         repeatCount="indefinite" ></animate>
                <animate attributeName="stroke-opacity"
                         begin="3s" dur="3s"
                         values="1;0" calcMode="linear"
                         repeatCount="indefinite" ></animate>
                <animate attributeName="stroke-width"
                         begin="3s" dur="3s"
                         values="2;0" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="22" cy="22" r="8" stroke="#a30">
                <animate attributeName="r"
                         begin="0s" dur="1.5s"
                         values="6;1;2;3;4;5;6"
                         calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
        </g>
    </g>
    <g size="58" id="spinning-circles">
        <g red" fill-rule="evenodd">
        <g transform="translate(2 1)" stroke-width="1.5">
            <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" >
                <animate attributeName="fill-opacity"
                         begin="0s" dur="1.3s"
                         values="1;0;0;0;0;0;0;0" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" >
                <animate attributeName="fill-opacity"
                         begin="0s" dur="1.3s"
                         values="0;1;0;0;0;0;0;0" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" >
                <animate attributeName="fill-opacity"
                         begin="0s" dur="1.3s"
                         values="0;0;1;0;0;0;0;0" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="27" cy="49.125" r="5" fill-opacity="0" >
                <animate attributeName="fill-opacity"
                         begin="0s" dur="1.3s"
                         values="0;0;0;1;0;0;0;0" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" >
                <animate attributeName="fill-opacity"
                         begin="0s" dur="1.3s"
                         values="0;0;0;0;1;0;0;0" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" >
                <animate attributeName="fill-opacity"
                         begin="0s" dur="1.3s"
                         values="0;0;0;0;0;1;0;0" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" >
                <animate attributeName="fill-opacity"
                         begin="0s" dur="1.3s"
                         values="0;0;0;0;0;0;1;0" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
            <circle cx="27" cy="5" r="5" fill-opacity="0">
                <animate attributeName="fill-opacity"
                         begin="0s" dur="1.3s"
                         values="0;0;0;0;0;0;0;1" calcMode="linear"
                         repeatCount="indefinite" ></animate>
            </circle>
        </g>
    </g>
    </g>
    <g size="38" id="tail-spin">
        <defs>
            <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
                <stop stop-color="#03a" stop-opacity="0" offset="0%"></stop>
                <stop stop-color="#03a" stop-opacity=".631" offset="63.146%"></stop>
                <stop stop-color="#03a" offset="100%"></stop>
            </linearGradient>
        </defs>
        <g fill="none" fill-rule="evenodd">
            <g transform="translate(1 1)">
                <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
                    <animateTransform
                            attributeName="transform"
                            type="rotate"
                            from="0 18 18"
                            to="360 18 18"
                            dur="0.9s"
                            repeatCount="indefinite" ></animateTransform>
                </path>
                <circle  cx="36" cy="18" r="1">
                    <animateTransform
                            attributeName="transform"
                            type="rotate"
                            from="0 18 18"
                            to="360 18 18"
                            dur="0.9s"
                            repeatCount="indefinite" ></animateTransform>
                </circle>
            </g>
        </g>
    </g>
</template>