0000
This commit is contained in:
110
template/pageLoding/pageLoding.wxss
Normal file
110
template/pageLoding/pageLoding.wxss
Normal file
@@ -0,0 +1,110 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user