mirror of
https://github.com/beak-insights/felicity-lims.git
synced 2025-02-23 08:23:00 +08:00
44 lines
1.4 KiB
CSS
44 lines
1.4 KiB
CSS
|
.fel-loader {
|
||
|
width: 10px;
|
||
|
height: 10px;
|
||
|
border-radius: 50%;
|
||
|
display: block;
|
||
|
margin: 15px auto;
|
||
|
position: relative;
|
||
|
color: #fff;
|
||
|
left: -100px;
|
||
|
box-sizing: border-box;
|
||
|
animation: shadowRolling 2s linear infinite;
|
||
|
}
|
||
|
|
||
|
@keyframes shadowRolling {
|
||
|
0% {
|
||
|
box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||
|
}
|
||
|
12% {
|
||
|
box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||
|
}
|
||
|
25% {
|
||
|
box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
||
|
}
|
||
|
36% {
|
||
|
box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
|
||
|
}
|
||
|
50% {
|
||
|
box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
|
||
|
}
|
||
|
62% {
|
||
|
box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
|
||
|
}
|
||
|
75% {
|
||
|
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
|
||
|
}
|
||
|
87% {
|
||
|
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
|
||
|
}
|
||
|
100% {
|
||
|
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
|
||
|
200px 0 rgba(255, 255, 255, 0);
|
||
|
}
|
||
|
}
|