您的位置：首页 > Web前端 > CSS

一个简单实用的css loading图标

2017-01-06 10:15 381 查看

摘要

在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();
};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航