Building a ajax spinner in SVG

So you get a SVG static image delivered from your client.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 49.715 49.718" enable-background="new 0 0 49.715 49.718" xml:space="preserve"><circle fill="#111111" cx="24.857" cy="4.495" r="4.496"></circle><circle fill="#333333" cx="45.219" cy="24.858" r="4.496"></circle><circle fill="#555555" cx="39.122" cy="10.486" r="4.496"></circle><circle fill="#777777" cx="4.496" cy="24.858" r="4.496"></circle><circle fill="#999999" cx="24.858" cy="45.222" r="4.496"</circle><circle fill="#BBBBBB" cx="10.487" cy="10.574" r="4.496"></circle><circle fill="#CCCCCC" cx="10.487" cy="39.209" r="4.496"></circle><circle fill="#EEEEEE" cx="39.123" cy="39.209" r="4.496"></circle></svg>

And it looks like this:

To make it animated, we need to add the following line within all circle tags:

<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 25 25; 45 25 25; 90 25 25; 135 25 25; 180 25 25; 225 25 25; 270 25 25; 315 25 25" dur="1s" repeatCount="indefinite" additive="replace" calcMode="discrete" fill="freeze"/>

Like this:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 49.715 49.718" enable-background="new 0 0 49.715 49.718" xml:space="preserve"><circle fill="#000000" cx="24.857" cy="4.495" r="4.496"><animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 25 25; 45 25 25; 90 25 25; 135 25 25; 180 25 25; 225 25 25; 270 25 25; 315 25 25" dur="1s" repeatCount="indefinite" additive="replace" calcMode="discrete" fill="freeze"/></circle><circle fill="#222222" cx="45.219" cy="24.858" r="4.496"><animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 25 25; 45 25 25; 90 25 25; 135 25 25; 180 25 25; 225 25 25; 270 25 25; 315 25 25" dur="1s" repeatCount="indefinite" additive="replace" calcMode="discrete" fill="freeze"/></circle><circle fill="#444444" cx="39.122" cy="10.486" r="4.496"><animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 25 25; 45 25 25; 90 25 25; 135 25 25; 180 25 25; 225 25 25; 270 25 25; 315 25 25" dur="1s" repeatCount="indefinite" additive="replace" calcMode="discrete" fill="freeze"/></circle><circle fill="#666666" cx="4.496" cy="24.858" r="4.496"><animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 25 25; 45 25 25; 90 25 25; 135 25 25; 180 25 25; 225 25 25; 270 25 25; 315 25 25" dur="1s" repeatCount="indefinite" additive="replace" calcMode="discrete" fill="freeze"/></circle><circle fill="#888888" cx="24.858" cy="45.222" r="4.496"><animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 25 25; 45 25 25; 90 25 25; 135 25 25; 180 25 25; 225 25 25; 270 25 25; 315 25 25" dur="1s" repeatCount="indefinite" additive="replace" calcMode="discrete" fill="freeze"/></circle><circle fill="#AAAAAA" cx="10.487" cy="10.574" r="4.496"><animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 25 25; 45 25 25; 90 25 25; 135 25 25; 180 25 25; 225 25 25; 270 25 25; 315 25 25" dur="1s" repeatCount="indefinite" additive="replace" calcMode="discrete" fill="freeze"/></circle><circle fill="#CCCCCC" cx="10.487" cy="39.209" r="4.496"><animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 25 25; 45 25 25; 90 25 25; 135 25 25; 180 25 25; 225 25 25; 270 25 25; 315 25 25" dur="1s" repeatCount="indefinite" additive="replace" calcMode="discrete" fill="freeze"/></circle><circle fill="#EEEEEE" cx="39.123" cy="39.209" r="4.496"><animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 25 25; 45 25 25; 90 25 25; 135 25 25; 180 25 25; 225 25 25; 270 25 25; 315 25 25" dur="1s" repeatCount="indefinite" additive="replace" calcMode="discrete" fill="freeze"/></circle></svg>

Then we get a animated SVG like this:

Leave a Reply

Your email address will not be published. Required fields are marked *