![](data:image/svg+xml;utf-8,<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><g><line x1="100.00" y1="70.00" x2="100.00" y2="78.00" stroke-width="10" stroke="violet" stroke-linecap="round"><animate dur="5000ms" repeatCount="indefinite" attributeName="stroke" values="violet;indigo;blue;lightgreen;yellow;darkorange;red" begin="0ms"></animate></line><line x1="123.45" y1="81.30" x2="117.20" y2="86.28" stroke-width="10" stroke="indigo" stroke-linecap="round"><animate dur="5000ms" repeatCount="indefinite" attributeName="stroke" values="violet;indigo;blue;lightgreen;yellow;darkorange;red" begin="714.2857142857143ms"></animate></line><line x1="129.25" y1="106.68" x2="121.45" y2="104.90" stroke-width="10" stroke="blue" stroke-linecap="round"><animate dur="5000ms" repeatCount="indefinite" attributeName="stroke" values="violet;indigo;blue;lightgreen;yellow;darkorange;red" begin="1428.5714285714287ms"></animate></line><line x1="113.02" y1="127.03" x2="109.55" y2="119.82" stroke-width="10" stroke="lightgreen" stroke-linecap="round"><animate dur="5000ms" repeatCount="indefinite" attributeName="stroke" values="violet;indigo;blue;lightgreen;yellow;darkorange;red" begin="2142.857142857143ms"></animate></line><line x1="86.98" y1="127.03" x2="90.45" y2="119.82" stroke-width="10" stroke="yellow" stroke-linecap="round"><animate dur="5000ms" repeatCount="indefinite" attributeName="stroke" values="violet;indigo;blue;lightgreen;yellow;darkorange;red" begin="2857.1428571428573ms"></animate></line><line x1="70.75" y1="106.68" x2="78.55" y2="104.90" stroke-width="10" stroke="darkorange" stroke-linecap="round"><animate dur="5000ms" repeatCount="indefinite" attributeName="stroke" values="violet;indigo;blue;lightgreen;yellow;darkorange;red" begin="3571.4285714285716ms"></animate></line><line x1="76.55" y1="81.30" x2="82.80" y2="86.28" stroke-width="10" stroke="red" stroke-linecap="round"><animate dur="5000ms" repeatCount="indefinite" attributeName="stroke" values="violet;indigo;blue;lightgreen;yellow;darkorange;red" begin="4285.714285714286ms"></animate></line></g></svg>)
~2.158kb
Rainbow Spinner, is a side project that explores SVG as a self contained animation format.
SMIL, animation markup for SVG allows easy access to animation parameters for customisation, while a CSS variable is an easy copy&paste way to add a spinner to your project. What you get is an animated SVG, wrapped in a CSS variable. You can also download the animated SVG file.
This website has been built with vue.js & nuxt.js, source code at @github
You can find me on twitter, or here https://kozysa.me, would be great to find out how it's beeing used!