327 lines
7.7 KiB
SCSS
327 lines
7.7 KiB
SCSS
.favorite-loader {
|
|
&.progress1 {
|
|
width: 240rpx;
|
|
height: 40rpx;
|
|
--progress1: #000;
|
|
background:
|
|
linear-gradient(var(--progress1) 0 0) 0/0% no-repeat #ddd;
|
|
animation: progress-l1 2s infinite linear;
|
|
}
|
|
|
|
@keyframes progress-l1 {
|
|
100% {
|
|
background-size: 100%
|
|
}
|
|
}
|
|
|
|
&.progress2 {
|
|
width: 240rpx;
|
|
height: 40rpx;
|
|
border-radius: 40rpx;
|
|
--progress2_0: orange;
|
|
--progress2_1: lightblue;
|
|
background:
|
|
linear-gradient(var(--progress2_0) 0 0) 0/0% no-repeat var(--progress2_1);
|
|
animation: progress-l2 2s infinite steps(10);
|
|
}
|
|
|
|
@keyframes progress-l2 {
|
|
100% {
|
|
background-size: 110%
|
|
}
|
|
}
|
|
|
|
&.progress3 {
|
|
width: 240rpx;
|
|
height: 40rpx;
|
|
border-radius: 40rpx;
|
|
--progress3_0: #f03355;
|
|
--progress3_1: #ffa516;
|
|
background:
|
|
repeating-linear-gradient(135deg, var(--progress3_0) 0 10px, var(--progress3_1) 0 20px) 0/0% no-repeat,
|
|
repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
|
|
animation: progress-l3 2s infinite;
|
|
}
|
|
|
|
@keyframes progress-l3 {
|
|
100% {
|
|
background-size: 100%
|
|
}
|
|
}
|
|
|
|
&.progress4 {
|
|
width: 240rpx;
|
|
height: 40rpx;
|
|
--progress4: #000;
|
|
-webkit-mask: linear-gradient(90deg, var(--progress4) 70%, #0000 0) 0/20%;
|
|
background:
|
|
linear-gradient(var(--progress4) 0 0) 0/0% no-repeat #ddd;
|
|
animation: progress-l4 2s infinite steps(6);
|
|
}
|
|
|
|
@keyframes progress-l4 {
|
|
100% {
|
|
background-size: 120%
|
|
}
|
|
}
|
|
|
|
&.progress5 {
|
|
width: 160rpx;
|
|
height: 80rpx;
|
|
--progress5: #000;
|
|
color: var(--progress5);
|
|
border: 2px solid currentColor;
|
|
border-right-color: transparent;
|
|
padding: 3px;
|
|
background:
|
|
repeating-linear-gradient(90deg, currentColor 0 10px, #0000 0 15px) 0/0% no-repeat content-box content-box;
|
|
position: relative;
|
|
animation: progress-l5 2s infinite steps(6);
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -2px;
|
|
bottom: -2px;
|
|
left: 100%;
|
|
width: 10px;
|
|
background:
|
|
linear-gradient(#0000 calc(50% - 7px), currentColor 0 calc(50% - 5px),
|
|
#0000 0 calc(50% + 5px), currentColor 0 calc(50% + 7px), #0000 0) left /100% 100%,
|
|
linear-gradient(currentColor calc(50% - 5px), #0000 0 calc(50% + 5px), currentColor 0) left /2px 100%,
|
|
linear-gradient(#0000 calc(50% - 5px), currentColor 0 calc(50% + 5px), #0000 0) right/2px 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
@keyframes progress-l5 {
|
|
100% {
|
|
background-size: 120%
|
|
}
|
|
}
|
|
|
|
&.progress6 {
|
|
width: 240rpx;
|
|
height: 44rpx;
|
|
border-radius: 40rpx;
|
|
--progress6: #514b82;
|
|
color: var(--progress6);
|
|
border: 2px solid;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
margin: 2px;
|
|
inset: 0 100% 0 0;
|
|
border-radius: inherit;
|
|
background: currentColor;
|
|
animation: progress-l6 2s infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes progress-l6 {
|
|
100% {
|
|
inset: 0
|
|
}
|
|
}
|
|
|
|
&.progress7 {
|
|
width: 240rpx;
|
|
height: 48rpx;
|
|
--progress7_0: #000;
|
|
--progress7_1: #25b09b;
|
|
-webkit-mask:
|
|
radial-gradient(circle closest-side, var(--progress7_0) 94%, #0000) 0 0/25% 100%,
|
|
linear-gradient(var(--progress7_0) 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
|
|
background:
|
|
linear-gradient(var(--progress7_1) 0 0) 0/0% no-repeat #ddd;
|
|
animation: progress-l7 2s infinite linear;
|
|
}
|
|
|
|
@keyframes progress-l7 {
|
|
100% {
|
|
background-size: 100%
|
|
}
|
|
}
|
|
|
|
|
|
&.progress8 {
|
|
width: 120rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
-webkit-mask: linear-gradient(0deg, #000 55%, #0000 0) bottom/100% 18.18%;
|
|
--progress8_0: #f03355;
|
|
--progress8_1: #ddd;
|
|
background:
|
|
linear-gradient(var(--progress8_0) 0 0) bottom/100% 0% no-repeat var(--progress8_1);
|
|
animation: progress-l8 2s infinite steps(7);
|
|
}
|
|
|
|
@keyframes progress-l8 {
|
|
100% {
|
|
background-size: 100% 115%
|
|
}
|
|
}
|
|
|
|
&.progress9 {
|
|
--r1: 154%;
|
|
--r2: 68.5%;
|
|
width: 120rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
--progress9_0: #269af2;
|
|
--progress9_1: #ccc;
|
|
background:
|
|
radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, var(--progress9_0) 80%),
|
|
radial-gradient(var(--r1) var(--r2) at bottom, var(--progress9_0) 79.5%, #0000 80%),
|
|
radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, var(--progress9_0) 80%),
|
|
var(--progress9_1);
|
|
background-size: 50.5% 220%;
|
|
background-position: -100% 0%, 0% 0%, 100% 0%;
|
|
background-repeat: no-repeat;
|
|
animation: progress-l9 2s infinite linear;
|
|
}
|
|
|
|
@keyframes progress-l9 {
|
|
33% {
|
|
background-position: 0% 33%, 100% 33%, 200% 33%
|
|
}
|
|
|
|
66% {
|
|
background-position: -100% 66%, 0% 66%, 100% 66%
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 100%, 100% 100%, 200% 100%
|
|
}
|
|
}
|
|
|
|
&.progress10 {
|
|
width: 120rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
animation: progress-l10 2s infinite;
|
|
--progress10: #f03355;
|
|
}
|
|
|
|
@keyframes progress-l10 {
|
|
0% {
|
|
background: conic-gradient(var(--progress10) 0, #0000 0)
|
|
}
|
|
|
|
12.5% {
|
|
background: conic-gradient(var(--progress10) 45deg, #0000 46deg)
|
|
}
|
|
|
|
25% {
|
|
background: conic-gradient(var(--progress10) 90deg, #0000 91deg)
|
|
}
|
|
|
|
37.5% {
|
|
background: conic-gradient(var(--progress10) 135deg, #0000 136deg)
|
|
}
|
|
|
|
50% {
|
|
background: conic-gradient(var(--progress10) 180deg, #0000 181deg)
|
|
}
|
|
|
|
62.5% {
|
|
background: conic-gradient(var(--progress10) 225deg, #0000 226deg)
|
|
}
|
|
|
|
75% {
|
|
background: conic-gradient(var(--progress10) 270deg, #0000 271deg)
|
|
}
|
|
|
|
87.5% {
|
|
background: conic-gradient(var(--progress10) 315deg, #0000 316deg)
|
|
}
|
|
|
|
100% {
|
|
background: conic-gradient(var(--progress10) 360deg, #0000 360deg)
|
|
}
|
|
}
|
|
|
|
&.progress11 {
|
|
width: 148rpx;
|
|
height: 48rpx;
|
|
--progress11_0: #25b09b;
|
|
--progress11_1: #ddd;
|
|
-webkit-mask:
|
|
conic-gradient(from 135deg at top, #0000, #000 .5deg 90deg, #0000 90.5deg) 0 0,
|
|
conic-gradient(from -45deg at bottom, #0000, #000 .5deg 90deg, #0000 90.5deg) 0 100%;
|
|
-webkit-mask-size: 25% 50%;
|
|
-webkit-mask-repeat: repeat-x;
|
|
background: linear-gradient(var(--progress11_0) 0 0) left/0% 100% no-repeat var(--progress11_1);
|
|
animation: progress-l11 2s infinite linear;
|
|
}
|
|
|
|
@keyframes progress-l11 {
|
|
100% {
|
|
background-size: 100% 100%
|
|
}
|
|
}
|
|
|
|
&.progress12 {
|
|
width: 120rpx;
|
|
height: 100rpx;
|
|
--m: no-repeat linear-gradient(90deg, #000 70%, #0000 0);
|
|
--progress12_0: #514b82;
|
|
--progress12_1: #ddd;
|
|
-webkit-mask:
|
|
var(--m) calc(0*100%/4) 100%/calc(100%/5) calc(1*100%/5),
|
|
var(--m) calc(1*100%/4) 100%/calc(100%/5) calc(2*100%/5),
|
|
var(--m) calc(2*100%/4) 100%/calc(100%/5) calc(3*100%/5),
|
|
var(--m) calc(3*100%/4) 100%/calc(100%/5) calc(4*100%/5),
|
|
var(--m) calc(4*100%/4) 100%/calc(100%/5) calc(5*100%/5);
|
|
background: linear-gradient(var(--progress12_0) 0 0) left/0% 100% no-repeat var(--progress12_1);
|
|
animation: progress-l12 2s infinite steps(6);
|
|
}
|
|
|
|
@keyframes progress-l12 {
|
|
100% {
|
|
background-size: 120% 100%
|
|
}
|
|
}
|
|
|
|
&.progress13 {
|
|
width: 240rpx;
|
|
height: 40rpx;
|
|
--progress13_0: #000;
|
|
--progress13_1: #ddd;
|
|
-webkit-mask: radial-gradient(circle closest-side, var(--progress13_0) 94%, #0000) left/20% 100%;
|
|
background: linear-gradient(var(--progress13_0) 0 0) left/0% 100% no-repeat var(--progress13_1);
|
|
animation: progress-l13 2s infinite steps(6);
|
|
}
|
|
|
|
@keyframes progress-l13 {
|
|
100% {
|
|
background-size: 120% 100%
|
|
}
|
|
}
|
|
|
|
&.progress14 {
|
|
width: 120rpx;
|
|
aspect-ratio: 1;
|
|
--progress14_0: #dc1818;
|
|
--progress14_1: #ccc;
|
|
background: linear-gradient(var(--progress14_0) 0 0) bottom/100% 0% no-repeat var(--progress14_1);
|
|
-webkit-mask:
|
|
radial-gradient(circle at 60% 65%, #000 62%, #0000 65%) top left,
|
|
radial-gradient(circle at 40% 65%, #000 62%, #0000 65%) top right,
|
|
linear-gradient(to bottom left, #000 42%, #0000 43%) bottom left,
|
|
linear-gradient(to bottom right, #000 42%, #0000 43%) bottom right;
|
|
-webkit-mask-size: 50% 50%;
|
|
-webkit-mask-repeat: no-repeat;
|
|
animation: progress-l14 2s infinite linear;
|
|
}
|
|
|
|
@keyframes progress-l14 {
|
|
90%,
|
|
100% {
|
|
background-size: 100% 100%
|
|
}
|
|
}
|
|
|
|
} |