<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<style>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
body {
/* background-color: #000; */
/* color: #000; */
}
h2 {
color: #fff;
}
.load-list {
width: 80%;
height: 60%;
display: flex;
padding: 0;
justify-content: space-between;
align-items: center;
transition: all 250ms linear;
}
.load-item {
width: 12px;
height: 30px;
background: #ECF62A;
}
.res {
width: 100%;
height: 30%;
}
p {
padding-left: 60px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 56px;
margin: 0;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.la-line-scale > div {
/* width: 4px;
height: 32px;
margin: 2px; */
margin-top: 0;
margin-bottom: 0;
border-radius: 0;
-webkit-animation: line-scale 2s infinite ease;
-moz-animation: line-scale 2s infinite ease;
-o-animation: line-scale 2s infinite ease;
animation: line-scale 2s infinite ease;
}
.la-line-scale > div:nth-child(1) {
-webkit-animation-delay: -2s;
-moz-animation-delay: -2s;
-o-animation-delay: -2s;
animation-delay: -2s;
}
.la-line-scale > div:nth-child(2) {
-webkit-animation-delay: -1.9s;
-moz-animation-delay: -1.9s;
-o-animation-delay: -1.9s;
animation-delay: -1.9s;
}
.la-line-scale > div:nth-child(3) {
-webkit-animation-delay: -1.8s;
-moz-animation-delay: -1.8s;
-o-animation-delay: -1.8s;
animation-delay: -1.8s;
}
.la-line-scale > div:nth-child(4) {
-webkit-animation-delay: -1.7s;
-moz-animation-delay: -1.7s;
-o-animation-delay: -1.7s;
animation-delay: -1.7s;
}
.la-line-scale > div:nth-child(5) {
-webkit-animation-delay: -1.6s;
-moz-animation-delay: -1.6s;
-o-animation-delay: -1.6s;
animation-delay: -1.6s;
}
.la-line-scale > div:nth-child(6) {
-webkit-animation-delay: -1.5s;
-moz-animation-delay: -1.5s;
-o-animation-delay: -1.5s;
animation-delay: -1.5s;
}
.la-line-scale > div:nth-child(7) {
-webkit-animation-delay: -1.4s;
-moz-animation-delay: -1.4s;
-o-animation-delay: -1.4s;
animation-delay: -1.4s;
}
.la-line-scale > div:nth-child(8) {
-webkit-animation-delay: -1.3s;
-moz-animation-delay: -1.3s;
-o-animation-delay: -1.3s;
animation-delay: -1.3s;
}
.la-line-scale > div:nth-child(9) {
-webkit-animation-delay: -1.2s;
-moz-animation-delay: -1.2s;
-o-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.la-line-scale > div:nth-child(10) {
-webkit-animation-delay: -1.1s;
-moz-animation-delay: -1.1s;
-o-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.la-line-scale > div:nth-child(11) {
-webkit-animation-delay: -1s;
-moz-animation-delay: -1s;
-o-animation-delay: -1s;
animation-delay: -1s;
}
.la-line-scale > div:nth-child(12) {
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.la-line-scale > div:nth-child(13) {
-webkit-animation-delay: -0.8s;
-moz-animation-delay: -0.8s;
-o-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.la-line-scale > div:nth-child(14) {
-webkit-animation-delay: -0.7s;
-moz-animation-delay: -0.7s;
-o-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.la-line-scale > div:nth-child(15) {
-webkit-animation-delay: -0.6s;
-moz-animation-delay: -0.6s;
-o-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.la-line-scale > div:nth-child(16) {
-webkit-animation-delay: -0.5s;
-moz-animation-delay: -0.5s;
-o-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.la-line-scale > div:nth-child(17) {
-webkit-animation-delay: -0.4s;
-moz-animation-delay: -0.4s;
-o-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.la-line-scale > div:nth-child(18) {
-webkit-animation-delay: -0.3s;
-moz-animation-delay: -0.3s;
-o-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.la-line-scale > div:nth-child(19) {
-webkit-animation-delay: -0.2s;
-moz-animation-delay: -0.2s;
-o-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.la-line-scale > div:nth-child(20) {
-webkit-animation-delay: -0.1s;
-moz-animation-delay: -0.1s;
-o-animation-delay: -0.1s;
animation-delay: -0.1s;
}
.la-line-scale.la-sm {
width: 20px;
height: 16px;
}
.la-line-scale.la-sm > div {
width: 2px;
height: 16px;
margin: 1px;
margin-top: 0;
margin-bottom: 0;
}
.la-line-scale.la-2x {
/* width: 80px;
height: 64px; */
}
.la-line-scale.la-2x > div {
/* width: 8px;
height: 64px;
margin: 4px; */
margin-top: 0;
margin-bottom: 0;
}
.la-line-scale.la-3x {
width: 120px;
height: 96px;
}
.la-line-scale.la-3x > div {
width: 12px;
height: 96px;
margin: 6px;
margin-top: 0;
margin-bottom: 0;
}
@-webkit-keyframes line-scale {
0%,
40%,
100% {
opacity: 0.2;
}
20% {
opacity: 1;
}
}
@-moz-keyframes line-scale {
0%,
40%,
100% {
/* -webkit-transform: scaleY(0.4);
-moz-transform: scaleY(0.4);
transform: scaleY(0.4); */
opacity: 0.2;
}
20% {
/* -webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
transform: scaleY(1); */
opacity: 1;
}
}
@-o-keyframes line-scale {
0%,
40%,
100% {
/* -webkit-transform: scaleY(0.4);
-o-transform: scaleY(0.4);
transform: scaleY(0.4); */
opacity: 0.2;
}
20% {
/* -webkit-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1); */
opacity: 1;
}
}
@keyframes line-scale {
0%,
40%,
100% {
/* -webkit-transform: scaleY(0.4);
-moz-transform: scaleY(0.4);
-o-transform: scaleY(0.4);
transform: scaleY(0.4); */
opacity: 0.2;
}
20% {
/* -webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1); */
opacity: 1;
}
}
</style>
<title></title>
</head>
<body class="yjpwgk_section">
<div class="content">
<div class="load-list la-line-scale la-2x">
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
<div class="load-item"></div>
</div>
<div class="res">
<p>正在计算…</p>
</div>
</div>
</body>
</html>
loading
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- 试例： loading的js引入文件必须放<head>内 html base_loading.js 当页面资源加载...
- 原理：每发送一次请求就+1，每执行完一次请求就-1，最后数字得0 就说明都请求完了
- 原先的代码是这样的 但是呢,没有出现预期的结果,loading显示的text还是拼命加载中 so,我就这样干......
- 实现：页面没加载完出现的loading蒙层 附上代码 <template> </template> exportd...
- redis 服务基本上坑不多，基本上注意一下几点： 主动设置 key 过期时间 注意不要有大 key 最近遇到了一...
