| <!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