摘要:本篇教程介绍了HTML+CSS入门 一个简单实用的CSS loading图标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 一个简单实用的CSS loading图标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。<
在web开发中,为了提高用户体验,在加载数据的时候都会给一个loading的提示。
Html
<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="//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();
};
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号