110 lines
3.1 KiB
Plaintext
110 lines
3.1 KiB
Plaintext
|
.loading {
|
||
|
|
align-items: center;
|
||
|
|
background: #fff;
|
||
|
|
color: #333;
|
||
|
|
display: flex;
|
||
|
|
font-size: 26rpx;
|
||
|
|
height: 100vh;
|
||
|
|
justify-content: center;
|
||
|
|
position: fixed;
|
||
|
|
width: 100vw;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
display: inline-flex;
|
||
|
|
height: 120rpx;
|
||
|
|
width: 120rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle {
|
||
|
|
border-radius: 50%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: block;
|
||
|
|
left: calc(50vw - 120px);
|
||
|
|
position: fixed;
|
||
|
|
top: calc(50vh - 120px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle,.load-container {
|
||
|
|
height: 240px;
|
||
|
|
width: 240px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.load-container {
|
||
|
|
border: 1px solid hsla(0,0%,100%,.2);
|
||
|
|
box-sizing: border-box;
|
||
|
|
float: left;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader {
|
||
|
|
transform: translateZ(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.load7 .loader:before,.loader:after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.load6 .loader {
|
||
|
|
animation: load6 1.7s ease infinite;
|
||
|
|
border-radius: 50%;
|
||
|
|
font-size: 90px;
|
||
|
|
height: 1em;
|
||
|
|
margin: .8em auto;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
text-indent: -9999em;
|
||
|
|
width: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes load6 {
|
||
|
|
0% {
|
||
|
|
box-shadow: -.11em -.83em 0 -.4em #e8e8e8,-.11em -.83em 0 -.42em #e8e8e8,-.11em -.83em 0 -.44em #e8e8e8,-.11em -.83em 0 -.46em #e8e8e8,-.11em -.83em 0 -.477em #e8e8e8;
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
5%,95% {
|
||
|
|
box-shadow: -.11em -.83em 0 -.4em #e8e8e8,-.11em -.83em 0 -.42em #e8e8e8,-.11em -.83em 0 -.44em #e8e8e8,-.11em -.83em 0 -.46em #e8e8e8,-.11em -.83em 0 -.477em #e8e8e8;
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
box-shadow: -.11em -.83em 0 -.4em #e8e8e8,-.51em -.66em 0 -.42em #e8e8e8,-.75em -.36em 0 -.44em #e8e8e8,-.83em -.03em 0 -.46em #e8e8e8,-.81em .21em 0 -.477em #e8e8e8;
|
||
|
|
}
|
||
|
|
|
||
|
|
55% {
|
||
|
|
box-shadow: -.11em -.83em 0 -.4em #e8e8e8,-.29em -.78em 0 -.42em #e8e8e8,-.43em -.72em 0 -.44em #e8e8e8,-.52em -.65em 0 -.46em #e8e8e8,-.57em -.61em 0 -.477em #e8e8e8;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
box-shadow: -.11em -.83em 0 -.4em #e8e8e8,-.11em -.83em 0 -.42em #e8e8e8,-.11em -.83em 0 -.44em #e8e8e8,-.11em -.83em 0 -.46em #e8e8e8,-.11em -.83em 0 -.477em #e8e8e8;
|
||
|
|
transform: rotate(1turn);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes load6 {
|
||
|
|
0% {
|
||
|
|
box-shadow: -.11em -.83em 0 -.4em #e8e8e8,-.11em -.83em 0 -.42em #e8e8e8,-.11em -.83em 0 -.44em #e8e8e8,-.11em -.83em 0 -.46em #e8e8e8,-.11em -.83em 0 -.477em #e8e8e8;
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
5%,95% {
|
||
|
|
box-shadow: -.11em -.83em 0 -.4em #e8e8e8,-.11em -.83em 0 -.42em #e8e8e8,-.11em -.83em 0 -.44em #e8e8e8,-.11em -.83em 0 -.46em #e8e8e8,-.11em -.83em 0 -.477em #e8e8e8;
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
box-shadow: -.11em -.83em 0 -.4em #e8e8e8,-.51em -.66em 0 -.42em #e8e8e8,-.75em -.36em 0 -.44em #e8e8e8,-.83em -.03em 0 -.46em #e8e8e8,-.81em .21em 0 -.477em #e8e8e8;
|
||
|
|
}
|
||
|
|
|
||
|
|
55% {
|
||
|
|
box-shadow: -.11em -.83em 0 -.4em #e8e8e8,-.29em -.78em 0 -.42em #e8e8e8,-.43em -.72em 0 -.44em #e8e8e8,-.52em -.65em 0 -.46em #e8e8e8,-.57em -.61em 0 -.477em #e8e8e8;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
box-shadow: -.11em -.83em 0 -.4em #e8e8e8,-.11em -.83em 0 -.42em #e8e8e8,-.11em -.83em 0 -.44em #e8e8e8,-.11em -.83em 0 -.46em #e8e8e8,-.11em -.83em 0 -.477em #e8e8e8;
|
||
|
|
transform: rotate(1turn);
|
||
|
|
}
|
||
|
|
}
|