以本站以前发过的 加载loading 动画为例
本站查看全文css样式文件-纯CSS实现117个loading效果 |
css样式修改其内容
使其占满屏幕，设置背景
整体完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.loading {
width: 99%;
height: 99%;
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999999;
}
.shape {
width: 20px;
height: 20px;
position: absolute;
top: 40%;
opacity: 0.5;
}
.shape-1 {
background-color: #1875e5;
left: 46%;
animation: animationShape1 1.5s ease infinite;
}
.shape-2 {
background-color: #c5523f;
left: 48%;
animation: animationShape2 1.5s ease infinite 0.5s;
}
.shape-3 {
background-color: #499255;
left: 50%;
animation: animationShape3 1.5s ease infinite 0.8s;
}
.shape-4 {
background-color: #f2b736;
left: 52%;
animation: animationShape4 1.5s ease infinite 1s;
}
.shape-5 {
width: 100px;
top: 43%;
left: 46%;
color: #fff
}
@keyframes animationShape1 {
0% {
transfrom: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.5);
opacity: 1;
}
100% {
transfrom: scale(0.5);
opacity: 0.5;
}
}
@keyframes animationShape2 {
0% {
transfrom: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.5);
opacity: 1;
}
100% {
transfrom: scale(0.5);
opacity: 0.5;
}
}
@keyframes animationShape3 {
0% {
transfrom: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.5);
opacity: 1;
}
100% {
transfrom: scale(0.5);
opacity: 0.5;
}
}
@keyframes animationShape4 {
0% {
transfrom: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.5);
opacity: 1;
}
100% {
transfrom: scale(0.5);
opacity: 0.5;
}
}
</style>
</head>
<body>
<div class="loading">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
<div class="shape shape-5">正在加载中...</div>
</div>
<script>
$(window).on('load', function () {
$('.loading').hide(0);
});
</script>
</body>
</html>
如果是要加载完成之后，需要点击按钮再执行一遍 此过程，只需要添加一个，onclick 事件即可，
我是有这个需求的，
我的页面分页了加载很快，多数用在，数据有一个显示全部，这个才是我用的重点，
以上代码不变，需要的地方加入
<button type="submit" class="btn btn-default btn-sm" onclick="dataBtn()">全部</button>
<script>
// 点击后显示loading,重新加载一遍
function dataBtn() {
$('.loading').show()
......
......
......
}
</script>
图示
