Rainbow spinner loader - JavaScript based SVG animation - live preview

See documentation HERE

Duration of one cycle (milliseconds):


Minimal opacity:
%
Maximal opacity:
%
(Animation changes the visibility of the elements between the minimal and maximal percent values.)

Element invisibility (minimal opacity) during the cycle:
1 2 3 4 5

Relative size of elements in the circle:
%

Number of elements in the circle:
(Graphics and colors are optimized for 12 elements.)

One color
(You can change it to any color in css/loader-spinner.css file.)
SHAPE 1:
SHAPE 2:
SHAPE 3:
SHAPE 4:
SHAPE 5:
SHAPE 6:
SHAPE 7:
SHAPE 8:
SHAPE 9:
SHAPE 10:
SHAPE 11:
SHAPE 12:
SHAPE 13:
SHAPE 14:
SHAPE 15:
SHAPE 16:
SHAPE 17:
SHAPE 18:
SHAPE 19:
SHAPE 20: