摘要
在web开发中，为了提高用户体验，在加载数据的时候都会给一个loading的提示。
Html
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<style>
.cssload-container {
width: 24px;
height: 24px;
position: fixed;
top: 260px;
left: 50%;
margin-left: -12px;
}
.cssload-speeding-wheel {
width: 60px;
height: 60px;
margin: 0 auto;
border: 2px solid rgba(0,0,0,0.25);
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
animation: cssload-spin 575ms infinite linear;
-o-animation: cssload-spin 575ms infinite linear;
-ms-animation: cssload-spin 575ms infinite linear;
-webkit-animation: cssload-spin 575ms infinite linear;
-moz-animation: cssload-spin 575ms infinite linear;
}
@keyframes cssload-spin {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes cssload-spin {
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes cssload-spin {
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes cssload-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes cssload-spin {
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
} </style></head><body>
<div class="cssload-container">
<div class="cssload-speeding-wheel"></div>
</div>
<script>
function showLoading() {
$(".cssload-container").show();
}; function hideLoading() {
$(".cssload-container").hide();
}; var times = 1;
setInterval(function () { if (times % 2 === 0) {
hideLoading();
} else {
showLoading();
};
times++;
}, 2000) </script></body></html>
效果
把需要的css贴过去，然后把这段代码放在需要显示的页面上
<div class="cssload-container"><div class="cssload-speeding-wheel"></div>
</div>
控制显示与隐藏的js
function showLoading() {
$(".cssload-container").show();
};
function hideLoading() {
$(".cssload-container").hide();
};