SavageLoaders Fancy Loading Spinner Examples

example 1
Basic example of a round loading animation
$('#area1').savageLoader();
                
example 2
Altering the timing of the animation; moveToNextDelay = the time it takes for the animation to move between images, fadeDelay = the time it takes for each image to disappear.
$('#area2').savageLoader( {
    moveToNextDelay: 100,
    fadeDelay: 600
});
                
example 3
Using a different type of fade ('hide' vs 'fade').
$('#area3').savageLoader({
    moveToNextDelay: 100,
    fadeDelay: 700,
    fadeType: "hide"
});
                
example 4
A horizontal loading animation.
$('#area4').savageLoader({
    fadeDelay: 1300,
    loaderType: "horizontal"
});
                
example 5
A smaller version of the above.
$('#area5').savageLoader({
    fadeDelay: 1000,
    loaderType: "horizontal",
    imageCount: 5,
    turnDelay: 100
});
                
example 6
Spinning loading indicator
$('#area6').savageLoader({
    loaderType: "rotate"
});
                
example 7
ditto, but spinning faster
$('#area7').savageLoader({
    moveToNextDelay: 40,
    angleIncrement: 10,
    loaderType: "rotate"
});
                
example 8
a loading indicator that pulses in and out
$('#area8').savageLoader({
    loaderType: "pulse"
});
                
example 9
ditto, but faster
$('#area9').savageLoader({
    moveToNextDelay: 50,
    loaderType: "pulse"
});
                
example 10
An loading indicator that flips on the x axis


$('#area10').savageLoader({
    moveToNextDelay: 50,
    loaderType: "rotateX"
});

                
example 11
A loading indicator that flips on the y axis
$('#area11').savageLoader({
    moveToNextDelay: 50,
    loaderType: "rotateY"
});

                
example 12
ditto, but faster
$('#area12').savageLoader({
    moveToNextDelay: 10,
    loaderType: "rotateY"
});