Skip to content

Instantly share code, notes, and snippets.

@helderdarocha

helderdarocha/AnimatedLoaderComp.svg

Created May 9, 2016 16:11
Show Gist options
  • Save helderdarocha/44dfbf6b12ee7f94db5d3237e1e8333e to your computer and use it in GitHub Desktop.
Save helderdarocha/44dfbf6b12ee7f94db5d3237e1e8333e to your computer and use it in GitHub Desktop.
Download ZIP
SVG Loader Example 1 (using SMIL animations)
Display the source blob
Display the rendered blob
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment