<!DOCTYPE html>
<html>
<head>
<title>jQuery按钮点击loading加载 - 网页模板</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/loda-button.css" />
<style type="text/css">
body {
font-size: 100%;
margin: 1em 5em 5em;
font-family: 'Lucida Grande', sans-serif;
text-align: center;
}
h1 {
margin-top: 1.2em;
margin-bottom: 0;
padding-bottom: 0;
}
h2 {
font-size: 1em;
color: #888;
margin: 0 0 4em;
padding: 0;
}
.logo {
margin-top: 0;
}
.logo a, .logo a:link, .logo a:visited {
color: #aaa;
font-size: .4em;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1em;
transition: all .5s;
}
.logo a:hover {
color: #000;
}
.loda-btn {
margin: 0 2em 2em 0;
}
.container {
max-width: 50em;
margin: 0 auto;
}
</style>
</head>
<body>
<br>
<div class="container">
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-lock"></span>
Lock
</a>
<a href = "#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-drawer"></span> Archive
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-upload"></span> Upload
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-download"></span> Download
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-connection"></span> Connect
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-user"></span> User
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-search"></span> Search
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-phone"></span>
Phone
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-star"></span>
Star
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-remove"></span>
Remove
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-mail"></span>
Mail
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-flickr"></span>
Flickr
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-share"></span>
Share
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-file-pdf"></span>
PDF
</a>
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-disk"></span>
Save
</a>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/loda-button.js"></script>
<script type="text/javascript">
$('.loda-btn')
.lodaButton()
.click(function(e) {
e.preventDefault();
var _self = $(this);
_self.lodaButton('start');
setTimeout(function() {
_self.lodaButton('stop');
}, 2000);
});
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、世界之窗。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery按钮点击loading加载.zip （10个子文件） 
jQuery按钮点击loading加载 jiaoben1598 css fonts 
icomoon.woff 89KB
icomoon.svg 344KB icomoon.eot 66KB icomoon.ttf 66KB loda-button.css 2KB style.css 28KB
index.html 3KB js loda-button.js 1KB jquery-1.9.1.js 262KB
jQuery按钮点击loading加载.jpg 26KB资源评论
