72 lines
1.3 KiB
SCSS
72 lines
1.3 KiB
SCSS
.favorite-loader {
|
|
&.bars1 {
|
|
width: 90rpx;
|
|
aspect-ratio: 1;
|
|
--bars1: #000;
|
|
background:
|
|
no-repeat linear-gradient(var(--bars1) 0 0) 0% 50%,
|
|
no-repeat linear-gradient(var(--bars1) 0 0) 50% 50%,
|
|
no-repeat linear-gradient(var(--bars1) 0 0) 100% 50%;
|
|
background-size: 20% 100%;
|
|
animation: bars-l1 1s infinite linear;
|
|
}
|
|
|
|
@keyframes bars-l1 {
|
|
0% {
|
|
background-size: 20% 100%, 20% 100%, 20% 100%
|
|
}
|
|
|
|
33% {
|
|
background-size: 20% 10%, 20% 100%, 20% 100%
|
|
}
|
|
|
|
50% {
|
|
background-size: 20% 100%, 20% 10%, 20% 100%
|
|
}
|
|
|
|
66% {
|
|
background-size: 20% 100%, 20% 100%, 20% 10%
|
|
}
|
|
|
|
100% {
|
|
background-size: 20% 100%, 20% 100%, 20% 100%
|
|
}
|
|
}
|
|
|
|
&.bars2 {
|
|
width: 90rpx;
|
|
aspect-ratio: 1;
|
|
--bars2: #000;
|
|
background:
|
|
no-repeat linear-gradient(var(--bars2) 0 0) 0% 100%,
|
|
no-repeat linear-gradient(var(--bars2) 0 0) 50% 100%,
|
|
no-repeat linear-gradient(var(--bars2) 0 0) 100% 100%;
|
|
animation: bars-l2 1s infinite linear;
|
|
}
|
|
|
|
@keyframes bars-l2 {
|
|
0% {
|
|
background-size: 20% 100%, 20% 100%, 20% 100%
|
|
}
|
|
|
|
20% {
|
|
background-size: 20% 60%, 20% 100%, 20% 100%
|
|
}
|
|
|
|
40% {
|
|
background-size: 20% 80%, 20% 60%, 20% 100%
|
|
}
|
|
|
|
60% {
|
|
background-size: 20% 100%, 20% 80%, 20% 60%
|
|
}
|
|
|
|
80% {
|
|
background-size: 20% 100%, 20% 100%, 20% 80%
|
|
}
|
|
|
|
100% {
|
|
background-size: 20% 100%, 20% 100%, 20% 100%
|
|
}
|
|
}
|
|
} |