一个简单实用的css loading图标-原创手记-慕课网

摘要

在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贴过去，然后把这段代码放在需要显示的页面上

控制显示与隐藏的js

   function showLoading() {
            $(".cssload-container").show();
        };
        function hideLoading() {
            $(".cssload-container").hide();
        };