摘要
在web开发中，为了提高用户体验，在加载数据的时候都会给一个loading的提示。
Html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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();
};