SVG + React: Birth of respinner

Before the Plan Starts

I had seen tons of loading effects like spinkit, loader.css, spin.js. Using kinds of divs and positioning them in the grid in certain size. Then define different animations upon the components. Some using js, e.g. spin.js, applies computed animation on html by inserting dynamic styles into dom. Candidates like loader.css, hard code the width / position / color / etc. parameters with weak expansibility.

I was just coming up an idea, why not doing loading animation components (will call them spinner in the following content) with dynamic react props?

We can control count, size, gap, color, animation time these attributes, to map the sub-blocks like this. HTML + CSS? Maybe not.

SVG + React

SVG has long history since 2003, with wild basic components like：Rectangles, Circle, Ellipse, Line, Polyline, Polygon, Path. Easy to build. e.g. Circle is equal to div + border-radius, but better for read.

respinner demo

I provide few pretty respinners, to let you set your own props and attributes to controls size and animation.

Another Approach of SVG Animation

animateTransform helps svg animate. example:

<polygon points="60,30 90,90 30,90">
  <animateTransform attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    from="0 60 70"
                    to="360 60 70"
                    dur="10s"
                    repeatCount="indefinite"/>
</polygon>

It works but harder than CSS animation, and require more code. Some fancy animations can be hard to build. Finally I choose CSS.

That's it! What are you waiting for? Try it now! :)