Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
First Deploy
- Loading branch information
Showing
13 changed files
with
1,098 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>jQuery IntroLoader Demo</title> | ||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300' rel='stylesheet' type='text/css'> | ||
<link href="demo.css" rel="stylesheet"> | ||
|
||
<!-- PLUGIN INCLUSION ------------------------------------- --> | ||
<!-- css --> | ||
<link href="../dist/css/introLoader.css" rel="stylesheet"> | ||
<!-- jQuery, Helpers and jqueryIntrLoader --> | ||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> | ||
<script src="../dist/helpers/jquery.easing.1.3.js"></script> | ||
<script src="../dist/helpers/spin.min.js"></script> | ||
<script src="../dist/jquery.introLoader.js"></script> | ||
<!-- -------------------------------------------------------- --> | ||
|
||
</head> | ||
<body> | ||
<div id="element"></div> | ||
<h1>jqueryIntroLoader demopage</h1> | ||
<h3>DEFAULT Settings</h3> | ||
<p> | ||
<a href="index.html" class="button backtoindex" title="Default Options Demo">Back to Demos Index</a> | ||
</p> | ||
<div class="animDescription"> | ||
<h2>Animation description</h2> | ||
<p>This is a simple demo of jqueryIntroLoader loaded with default options</p> | ||
|
||
<code><pre> | ||
$("#element").introLoader(); | ||
<br> | ||
Equivalent of: | ||
<br> | ||
$("#element").introLoader({ | ||
|
||
animation: { | ||
name: 'simpleLoader', | ||
options: { | ||
effect:'fadeOut', | ||
ease: "linear", | ||
style: 'light', | ||
delayTime: 500, //delay time in milliseconds | ||
animationTime: 300 | ||
} | ||
}, | ||
|
||
spinJs: {} | ||
|
||
}); | ||
</pre></code> | ||
|
||
|
||
</div> | ||
|
||
|
||
<script> | ||
$(function() { | ||
$("#element").introLoader(); | ||
}); | ||
</script> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>jQuery IntroLoader Demo</title> | ||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300' rel='stylesheet' type='text/css'> | ||
<link href="demo.css" rel="stylesheet"> | ||
|
||
<!-- PLUGIN INCLUSION ------------------------------------- --> | ||
<!-- css --> | ||
<link href="../dist/css/introLoader.css" rel="stylesheet"> | ||
<!-- jQuery, Helpers and jqueryIntrLoader --> | ||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> | ||
<script src="../dist/helpers/jquery.easing.1.3.js"></script> | ||
<script src="../dist/helpers/spin.min.js"></script> | ||
<script src="../dist/jquery.introLoader.js"></script> | ||
<!-- -------------------------------------------------------- --> | ||
|
||
</head> | ||
<body> | ||
<div id="element"></div> | ||
<h1>jqueryIntroLoader demopage</h1> | ||
<h3> | ||
simpleLoader Animation <br> | ||
<small> | ||
effect:'slideBottom', ease: "easeInOutCirc", style: 'fluoMagenta', delayTime: 1000, animationTime: 500, onAfter: function() {...} | ||
</small> | ||
</h3> | ||
<p> | ||
<a href="index.html" class="button backtoindex" title="Default Options Demo">Back to Demos Index</a> | ||
</p> | ||
|
||
<p> | ||
See page code to learn more! | ||
</p> | ||
|
||
<div class="animDescription"> | ||
<h2>Animation description</h2> | ||
<p> | ||
simpleLoader Animation <br> | ||
<small> | ||
effect:'slideBottom', ease: "easeInOutCirc", style: 'fluoMagenta', delayTime: 1000, animationTime: 500, onAfter: function() {...} | ||
</small> | ||
</p> | ||
|
||
|
||
<code><pre> | ||
$("#element").introLoader({ | ||
|
||
animation: { | ||
name: 'simpleLoader', | ||
options: { | ||
effect:'slideDown', | ||
ease: "easeInOutCirc", | ||
style: 'fluoMagenta', | ||
delayTime: 1000, //delay time in milliseconds | ||
animationTime: 500, | ||
onAfter: function() {alert('onAfter');} | ||
} | ||
}, | ||
spinJs: { | ||
lines: 10, // The number of lines to draw | ||
length: 10, // The length of each line | ||
radius: 30, // The radius of the inner circle | ||
width: 8, // The line thickness | ||
color: '#fff' // #rgb or #rrggbb or array of colors | ||
} | ||
|
||
}); | ||
</pre></code> | ||
|
||
|
||
</div> | ||
|
||
|
||
<script> | ||
$(document).on('ready', function() { | ||
|
||
$("#element").introLoader({ | ||
|
||
animation: { | ||
name: 'simpleLoader', | ||
options: { | ||
effect:'slideDown', | ||
ease: "easeInOutCirc", | ||
style: 'fluoMagenta', | ||
delayTime: 1000, //delay time in milliseconds | ||
animationTime: 500, | ||
onAfter: function() {alert('onAfter');} | ||
} | ||
}, | ||
spinJs: { | ||
lines: 10, // The number of lines to draw | ||
length: 10, // The length of each line | ||
radius: 30, // The radius of the inner circle | ||
width: 8, // The line thickness | ||
color: '#fff' // #rgb or #rrggbb or array of colors | ||
} | ||
|
||
}); | ||
|
||
}); | ||
</script> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>jQuery IntroLoader Demo</title> | ||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300' rel='stylesheet' type='text/css'> | ||
<link href="demo.css" rel="stylesheet"> | ||
|
||
<!-- PLUGIN INCLUSION ------------------------------------- --> | ||
<!-- css --> | ||
<link href="../dist/css/introLoader.css" rel="stylesheet"> | ||
<!-- jQuery, Helpers and jqueryIntrLoader --> | ||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> | ||
<script src="../dist/helpers/jquery.easing.1.3.js"></script> | ||
<script src="../dist/helpers/spin.min.js"></script> | ||
<script src="../dist/jquery.introLoader.js"></script> | ||
<!-- -------------------------------------------------------- --> | ||
|
||
</head> | ||
<body> | ||
<div id="element"></div> | ||
<h1>jqueryIntroLoader demopage</h1> | ||
<h3> | ||
simpleLoader Animation <br> | ||
<small> | ||
effect:'slideRight', ease: "easeInOutCirc", style: 'dark', delayTime: 1000, animationTime: 500 | ||
</small> | ||
</h3> | ||
<p> | ||
<a href="index.html" class="button backtoindex" title="Default Options Demo">Back to Demos Index</a> | ||
</p> | ||
|
||
<p> | ||
See page code to learn more! | ||
</p> | ||
|
||
<div class="animDescription"> | ||
<h2>Animation description</h2> | ||
<p> | ||
simpleLoader Animation <br> | ||
<small> | ||
effect:'slideRight', ease: "easeInOutCirc", style: 'dark', delayTime: 1000, animationTime: 500 | ||
</small> | ||
</p> | ||
|
||
|
||
<code><pre> | ||
$("#element").introLoader({ | ||
|
||
animation: { | ||
name: 'simpleLoader', | ||
options: { | ||
effect:'slideRight', | ||
ease: "easeInOutCirc", | ||
style: 'dark', | ||
delayTime: 1000, //delay time in milliseconds | ||
animationTime: 500 | ||
}, | ||
spinJs: { | ||
lines: 13, // The number of lines to draw | ||
length: 20, // The length of each line | ||
radius: 30, // The radius of the inner circle | ||
width: 10, // The line thickness | ||
color: '#fff' // #rgb or #rrggbb or array of colors | ||
} | ||
} | ||
|
||
}); | ||
</pre></code> | ||
|
||
|
||
</div> | ||
|
||
|
||
<script> | ||
$(function() { | ||
$("#element").introLoader({ | ||
|
||
animation: { | ||
name: 'simpleLoader', | ||
options: { | ||
effect:'slideRight', | ||
ease: "easeInOutCirc", | ||
style: 'dark', | ||
delayTime: 1000, //delay time in milliseconds | ||
animationTime: 500 | ||
} | ||
}, | ||
spinJs: { | ||
lines: 13, // The number of lines to draw | ||
length: 20, // The length of each line | ||
radius: 30, // The radius of the inner circle | ||
width: 10, // The line thickness | ||
color: '#fff' // #rgb or #rrggbb or array of colors | ||
} | ||
|
||
}); | ||
|
||
}); | ||
</script> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,122 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>jQuery IntroLoader Demo</title> | ||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300' rel='stylesheet' type='text/css'> | ||
<link href="demo.css" rel="stylesheet"> | ||
|
||
<!-- PLUGIN INCLUSION ------------------------------------- --> | ||
<!-- css --> | ||
<link href="../dist/css/introLoader.css" rel="stylesheet"> | ||
<!-- jQuery, Helpers and jqueryIntrLoader --> | ||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> | ||
<script src="../dist/helpers/jquery.easing.1.3.js"></script> | ||
<script src="../dist/helpers/spin.min.js"></script> | ||
<script src="../dist/jquery.introLoader.js"></script> | ||
<!-- -------------------------------------------------------- --> | ||
|
||
</head> | ||
<body> | ||
<div id="element"></div> | ||
<h1>jqueryIntroLoader demopage</h1> | ||
<h3> | ||
simpleLoader Animation <br> | ||
<small> | ||
effect:'slideUp', ease: "easeOutSine", style: 'fluoYellow', delayTime: 1000, animationTime: 500, onBefore: function() {...}, onAfter: function() {...} | ||
</small> | ||
</h3> | ||
<p> | ||
<a href="index.html" class="button backtoindex" title="Default Options Demo">Back to Demos Index</a> | ||
</p> | ||
|
||
<p> | ||
See page code to learn more! | ||
</p> | ||
|
||
<div id="onAfterExample"> | ||
<h3>This element was hided bfore animation using "onBefore" option <br> | ||
and it was showed after animation using "onAfter" option</h3> | ||
</div> | ||
|
||
<div class="animDescription"> | ||
<h2>Animation description</h2> | ||
<p> | ||
simpleLoader Animation <br> | ||
<small> | ||
effect:'slideUp', ease: "easeOutSine", style: 'fluoYellow', delayTime: 1000, animationTime: 500, onBefore: function() {...}, onAfter: function() {...} | ||
</small> | ||
</p> | ||
|
||
|
||
<code><pre> | ||
$("#element").introLoader({ | ||
|
||
$("#element").introLoader({ | ||
|
||
animation: { | ||
name: 'simpleLoader', | ||
options: { | ||
effect:'slideUp', | ||
ease: "easeOutSine", | ||
style: 'fluoYellow', | ||
delayTime: 1000, //delay time in milliseconds | ||
animationTime: 500, | ||
onBefore: function() { | ||
$('#onAfterExample').hide(); | ||
}, | ||
onAfter: function() { | ||
$('#onAfterExample').fadeIn(); | ||
} | ||
} | ||
}, | ||
spinJs: { | ||
lines: 10, // The number of lines to draw | ||
length: 10, // The length of each line | ||
radius: 30, // The radius of the inner circle | ||
width: 8, // The line thickness | ||
} | ||
|
||
}); | ||
|
||
}); | ||
</pre></code> | ||
|
||
|
||
</div> | ||
|
||
|
||
<script> | ||
$(document).on('ready', function() { | ||
|
||
$("#element").introLoader({ | ||
|
||
animation: { | ||
name: 'simpleLoader', | ||
options: { | ||
effect:'slideUp', | ||
ease: "easeOutSine", | ||
style: 'fluoYellow', | ||
delayTime: 1000, //delay time in milliseconds | ||
animationTime: 500, | ||
onBefore: function() { | ||
$('#onAfterExample').hide(); | ||
}, | ||
onAfter: function() { | ||
$('#onAfterExample').fadeIn(); | ||
} | ||
} | ||
}, | ||
spinJs: { | ||
lines: 10, // The number of lines to draw | ||
length: 10, // The length of each line | ||
radius: 30, // The radius of the inner circle | ||
width: 8, // The line thickness | ||
} | ||
|
||
}); | ||
|
||
}); | ||
</script> | ||
|
||
</body> | ||
</html> |
Oops, something went wrong.