Description
Folding Loader SVG animation made Raphaël JavaScript Library. For page preloaders, content loaders, process indicators.
- Javascript based animation
- 17 examples, 13 ready-to-use SVG shapes
- Resolution independent and cross-browser vector graphics
- Easy to change animation speed, colors, resize the element
- Browsers supported: Firefox 3+, Safari 3+, Chrome 5+, Opera 9.5+ and IE 6+
- Mobile friendly
How to resize animated SVG element
Width and height properties are defined with CSS. Defaul values are 100px for both.
- Open
loader-style.cssfile in your favorite code editor - Search for
.loader svgselector - Changed the values (in pixels)
- Save the file.
How to resize text elements
- Open
loader-style.cssfile in your favorite code editor - Search for
.loader-text h2and.loader-text pselectors - Changed the values (in pixels)
- Save the file.
Javascript variables explained
You may edit these Javascript variables from loader.js, located right after the line /* SETUP ------
shapes Array of strings
The array of 13 predefined SVG shapes (paths) you can choose from. Paths in this array is actually half of the shape, as only half of is needed for animation (scaling). It is mirrored with code, so final element is full shape:
Note that three shapes can't be rotated during animation as they are unsymmetric in 4 sides : heart_unsymmetric, bars_unsymmetric, hexagon_unsymmetric
use_shape Array element pointer
Select the shape from array 'shapes' above. For example: shapes.rect_rotated
colors Array of strings
The sequence of folding shapes' colors.
darken_amount Number
Amount of darkening the color when animated. Default is 0.3
duration_1st_half | duration_2nd_half Number
Duration of 1st and 2nd half of animation loop. Default is 300
pause Number
Pause after 2nd half of animation loop. Default is 150
easing_1st_half | easing_2nd_half String
Animation easing methods. Possible values "<", ">", "linear", "<>", "bounce", "elastic", "backIn", "backOut"
More info: http://raphaeljs.com/easing.html
angles Array of numbers
Angle of SVG elements' rotation after 2nd half of animation loop. Only positive degree values.
Rotation sequence example: [ 0, 90, 180, 270 ] (makes loader to rotate by 90 degree after 2nd half of animation loop)
If you don't want the loader to rotate, use the array with single variable, for example: [ 180 ]
Notes
“Raphaël JavaScript Library” made by Dmitry Baranovskiy (The MIT License).