76 lines
1.4 KiB
SCSS
76 lines
1.4 KiB
SCSS
.favorite-loader {
|
|
font-size: inherit;
|
|
text-align: center;
|
|
line-height: inherit;
|
|
font-weight: bold;
|
|
display: inline-flex;
|
|
animation: l1 1s linear infinite alternate;
|
|
|
|
&.opacity {
|
|
--opacity: #000;
|
|
color: var(--opacity);
|
|
animation: l1 1s linear infinite alternate;
|
|
}
|
|
|
|
@keyframes l1 {
|
|
to {
|
|
opacity: 0
|
|
}
|
|
}
|
|
|
|
&.process {
|
|
--process: #000;
|
|
color: var(--process);
|
|
padding-bottom: 16rpx;
|
|
background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;
|
|
animation: l2 2s linear infinite;
|
|
}
|
|
|
|
@keyframes l2 {
|
|
to {
|
|
background-size: 100% 3px
|
|
}
|
|
}
|
|
|
|
&.dashedLine {
|
|
--dashedLine: #000;
|
|
color: var(--dashedLine);
|
|
padding: 0 5px 8px 0;
|
|
background: repeating-linear-gradient(90deg, currentColor 0 8%, #0000 0 10%) 200% 100%/200% 3px no-repeat;
|
|
animation: l3 2s steps(6) infinite;
|
|
}
|
|
|
|
@keyframes l3 {
|
|
to {
|
|
background-position: 80% 100%
|
|
}
|
|
}
|
|
|
|
&.typewriter {
|
|
--typewriter: #000;
|
|
color: var(--typewriter);
|
|
clip-path: inset(0 100% 0 0);
|
|
animation: l4 2s steps(11) infinite;
|
|
}
|
|
|
|
@keyframes l4 {
|
|
to {
|
|
clip-path: inset(0 -1ch 0 0)
|
|
}
|
|
}
|
|
|
|
&.colorChange {
|
|
color: #0000;
|
|
--colorChange: #C02942;
|
|
background: linear-gradient(90deg, var(--colorChange) calc(50% + 0.5ch), #000 0) right/calc(200% + 1ch) 100%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
animation: l5 2s infinite steps(11);
|
|
}
|
|
|
|
@keyframes l5 {
|
|
to {
|
|
background-position: left
|
|
}
|
|
}
|
|
} |