jquery-loading-animation
This is an animation library, used as an animation effects of load. Draw lessons from the online most of the CSS code, JS for encapsulation.
Show
How to use
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>demo</title>
<!--include css file-->
<link rel="stylesheet" type="text/css" href="css/loader.css"/>
</head>
<body>
<input type="button" name="loading" id="loading" value="LoadMore" />
</body>
<!--js file-->
<script src="js/loader.js" type="text/javascript" charset="utf-8"></script>
<!--need jq file-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// trigger
$("#loading").click(function(){
//start loading animation
//parameterOne className,parameterTwo delayTime
loader.loading({ className: 'ball-clip-rotate-multiple', delay: 1000});
//end loading animation
loader.close();
})
})
</script>
</html>Optional parameters
'ball-pulse'
'ball-grid-pulse'
'ball-clip-rotate'
'ball-clip-rotate-pulse'
'square-spin'
'ball-clip-rotate-multiple'
'ball-pulse-rise'
'ball-rotate'
'cube-transition'
'ball-zig-zag'
'ball-zig-zag-deflect'
'ball-triangle-path'
'ball-scale'
'line-scale'
'line-scale-party'
'ball-scale-multiple'
'ball-pulse-sync'
'ball-beat'
'line-scale-pulse-out'
`line-scale-pulse-out-rapid'
'ball-scale-ripple'
'ball-scale-ripple-multiple'
'ball-spin-fade-loader'
'line-spin-fade-loader'
'triangle-skew-spin'
'pacman'
'ball-grid-beat'
'semi-circle-spin'