Skip to content

Instantly share code, notes, and snippets.

@helderdarocha

helderdarocha/.block

Last active May 15, 2016 14:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save helderdarocha/ffdf91a6a3915abee017e3bdf66b75f1 to your computer and use it in GitHub Desktop.
Save helderdarocha/ffdf91a6a3915abee017e3bdf66b75f1 to your computer and use it in GitHub Desktop.
Download ZIP
Animated loader example 2
Raw
.block
license: cc-by-sa-4.0
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Animated SVG Loader</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="50%" height="50%" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="r" x="50" y="-10" height="20" width="75" rx="10" fill="#0000ff">
<animate attributeName="fill"
attributeType="XML"
values="#0000ff;#00ffff;#00ff00;#ffff00;#ff0000;#ff00ff;#0000ff;"
begin="0s" dur="6s"
calcMode="paced"
fill="freeze" repeatCount="indefinite">
</rect>
<g id="g">
<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"
/>
<use xlink:href="#r" opacity="1"/>
<use xlink:href="#r" opacity=".9" transform="rotate(30) scale(0.95)" />
<use xlink:href="#r" opacity=".8" transform="rotate(60) scale(0.9)" />
<use xlink:href="#r" opacity=".7" transform="rotate(90) scale(0.85)" />
<use xlink:href="#r" opacity=".6" transform="rotate(120) scale(0.8)" />
<use xlink:href="#r" opacity=".5" transform="rotate(150) scale(0.75)" />
<use xlink:href="#r" opacity=".4" transform="rotate(180) scale(0.7) " />
<use xlink:href="#r" opacity=".35" transform="rotate(210) scale(0.65)" />
<use xlink:href="#r" opacity=".3" transform="rotate(240) scale(0.6) " />
<use xlink:href="#r" opacity=".25" transform="rotate(270) scale(0.55)" />
<use xlink:href="#r" opacity=".2" transform="rotate(300) scale(0.5)" />
<use xlink:href="#r" opacity=".15" transform="rotate(330) scale(0.45)" />
</g>
</defs>
<use id="loader" xlink:href="#g" transform="translate(150,150)"></use>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment