Rainbow spinner loader - JavaScript based SVG animation
JavaScript based SVG animation for preloaders, content loaders.
Javascript based vector SVG animation
Resolution independent smooth animations
No external JavaScript or SVG libraries used
Customizable live preview
20 different SVG shapes
Easy to change:
Animation speed
Sizes
Colors
Visibility options
Number of elements
Usage
You can use rainbow spinner loader in 2 ways:
1. Change parameters in the Javascript file
You can change the 9 parameters in js/loader.js JavaScript file.
Then call the spinner function from HTML object element. For example: onload="use_params()"
Don't forget to use attributes: id="svg" type="image/svg+xml" data="svg/loader-spinner.svg" See loader-spinner.html for example!
2. Call Javascript function with parameters
You will use js/loader-call.js JavaScript file.
Then call the spinner function from HTML object element with 10 parameters. For example: onload="use_params('svg-01',1,1000,2,100,2,100,100,12,'no')"
If you'd like to use two or more different spinners, add different names for id attrbute. For example: 'svg-01', 'svg-02', 'svg-03'
Don't forget to use attributes: type="image/svg+xml" data="svg/loader-spinner.svg" See loader-spinner-call.html for example!
With CSS tricks (position, z-index), you can place this animated object over other elements, like JPG images.
Parameters
shape_act:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
duration:
Duration of one cycle (milliseconds)
600:
1200:
3000:
opacity_min, opacity_max:
Visibility of elements (%): 0 - invisible, 100 - fully visible
Animation changes the visibility of elements between minimum and maximum percent values.
0, 100:
2, 100:
10, 100:
0, 30:
invisibility:
Element invisibility (minimal opacity) during the cycle
1:
2:
3:
4:
5:
scale_shape:
Relative size of the elements in the circle (percent)
50:
100:
200:
scale_all:
Size of the whole svg object (px)
50:
100:
150:
shape_num:
Number of elements in the circle (graphics and colors are optimized for 12 elements).
Supported number of elements: 4-24
8:
12:
24:
color_fix:
Fixed colors: no - rainbow; yes - one color
If you use one color, you can set it at the beginning of the css/loader-spinner.css file: .color_fix.
'no':
'yes':
Thank You
Thank You for purchasing this item!
If you have any questions regarding this item, please contact me via my user page.