mirror of
https://github.com/beak-insights/felicity-lims.git
synced 2025-02-23 00:12:54 +08:00
43 lines
1.4 KiB
CSS
43 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);
|
|
}
|
|
}
|