mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
83 lines
1.3 KiB
CSS
83 lines
1.3 KiB
CSS
#loading {
|
|
position:fixed;
|
|
left:0;
|
|
top:0;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
.demo3 {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: #007bff;
|
|
position: absolute;
|
|
animation: demo3 linear 0.8s infinite;
|
|
-webkit-animation: demo3 linear 0.8s infinite;
|
|
}
|
|
.demo3:nth-child(1){
|
|
left: 24px;
|
|
top: 2px;
|
|
animation-delay:0s;
|
|
}
|
|
.demo3:nth-child(2){
|
|
left: 40px;
|
|
top: 8px;
|
|
animation-delay:0.1s;
|
|
}
|
|
.demo3:nth-child(3){
|
|
left: 47px;
|
|
top: 24px;
|
|
animation-delay:0.1s;
|
|
}
|
|
.demo3:nth-child(4){
|
|
left: 40px;
|
|
top: 40px;
|
|
animation-delay:0.2s;
|
|
}
|
|
.demo3:nth-child(5){
|
|
left: 24px;
|
|
top: 47px;
|
|
animation-delay:0.4s;
|
|
}
|
|
.demo3:nth-child(6){
|
|
left: 8px;
|
|
top: 40px;
|
|
animation-delay:0.5s;
|
|
}
|
|
.demo3:nth-child(7){
|
|
left: 2px;
|
|
top: 24px;
|
|
animation-delay:0.6s;
|
|
}
|
|
.demo3:nth-child(8){
|
|
left: 8px;
|
|
top: 8px;
|
|
animation-delay:0.7s;
|
|
}
|
|
|
|
@keyframes demo3
|
|
{
|
|
0%,40%,100% {transform: scale(1);}
|
|
20% {transform: scale(3);}
|
|
}
|
|
@-webkit-keyframes demo3
|
|
{
|
|
0%,40%,100% {transform: scale(1);}
|
|
20% {transform: scale(3);}
|
|
}
|
|
|
|
|
|
.loading-flex {
|
|
position:absolute;
|
|
top:45%;
|
|
left:50%;
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 768px){
|
|
.loading-flex {
|
|
position:absolute;
|
|
top:45%;
|
|
left:45%;
|
|
}
|
|
} |