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"
});
|