HTML CSS examples for SVG:Image
Use CSS to create SVG Loader Image
<html> <head> <title>Animated SVG Loader</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from www . j a va 2 s . c o m--> background: black; } #container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto auto; height: 100px; width: 100px; } </style> </head> <body> <div id="container"> <svg id="svg" viewbox="0 0 300 300"> <defs> <rect id="r" x="50" y="-10" height="20" width="75" rx="10" fill="#0000ff"> <animate attributeName="fill" attributeType="XML" values="red;#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> </div> </body> </html>