394 lines
8.3 KiB
SCSS
394 lines
8.3 KiB
SCSS
.favorite-loader {
|
|
&.spinner1 {
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
border: 8px solid;
|
|
--spinner1: #000;
|
|
border-color: var(--spinner1) #0000;
|
|
animation: spinner-l1 1s infinite;
|
|
}
|
|
|
|
@keyframes spinner-l1 {
|
|
to {
|
|
transform: rotate(.5turn)
|
|
}
|
|
}
|
|
|
|
&.spinner2 {
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
--spinner2_0: lightblue;
|
|
--spinner2_1: orange;
|
|
border: 16rpx solid var(--spinner2_0);
|
|
border-right-color: var(--spinner2_1);
|
|
animation: spinner-l2 1s infinite linear;
|
|
}
|
|
|
|
@keyframes spinner-l2 {
|
|
to {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
|
|
&.spinner3 {
|
|
width: 100rpx;
|
|
padding: 16rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
--spinner3: #25b09b;
|
|
background: var(--spinner3);
|
|
--_m:
|
|
conic-gradient(#0000 10%, #000),
|
|
linear-gradient(#000 0 0) content-box;
|
|
-webkit-mask: var(--_m);
|
|
mask: var(--_m);
|
|
-webkit-mask-composite: source-out;
|
|
mask-composite: subtract;
|
|
animation: spinner-l3 1s infinite linear;
|
|
}
|
|
|
|
@keyframes spinner-l3 {
|
|
to {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
|
|
&.spinner4 {
|
|
width: 100rpx;
|
|
--b: 16rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
padding: 1px;
|
|
--spinner4: #f03355;
|
|
background: conic-gradient(#0000 10%, var(--spinner4)) content-box;
|
|
-webkit-mask:
|
|
repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
|
|
radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
|
|
-webkit-mask-composite: destination-in;
|
|
mask-composite: intersect;
|
|
animation: spinner-l4 1s infinite steps(10);
|
|
}
|
|
|
|
@keyframes spinner-l4 {
|
|
to {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
|
|
|
|
&.spinner5 {
|
|
width: 100rpx;
|
|
--b: 16rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
--spinner5: #514b82;
|
|
background: var(--spinner5);
|
|
-webkit-mask:
|
|
repeating-conic-gradient(#0000 0deg, #000 1deg 70deg, #0000 71deg 90deg),
|
|
radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
|
|
-webkit-mask-composite: destination-in;
|
|
mask-composite: intersect;
|
|
animation: spinner-l5 1s infinite;
|
|
}
|
|
|
|
@keyframes spinner-l5 {
|
|
to {
|
|
transform: rotate(.5turn)
|
|
}
|
|
}
|
|
|
|
&.spinner6 {
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
padding: 3px;
|
|
--spinner6: #ffa516;
|
|
background:
|
|
radial-gradient(farthest-side, var(--spinner6) 95%, #0000) 50% 0/12px 12px no-repeat,
|
|
radial-gradient(farthest-side, #0000 calc(100% - 5px), var(--spinner6) calc(100% - 4px)) content-box;
|
|
animation: spinner-l6 2s infinite;
|
|
}
|
|
|
|
@keyframes spinner-l6 {
|
|
to {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
|
|
&.spinner7 {
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
--spinner7: #25b09b;
|
|
--_c: no-repeat radial-gradient(farthest-side, var(--spinner7) 92%, #0000);
|
|
background:
|
|
var(--_c) top,
|
|
var(--_c) left,
|
|
var(--_c) right,
|
|
var(--_c) bottom;
|
|
background-size: 12px 12px;
|
|
animation: spinner-l7 1s infinite;
|
|
}
|
|
|
|
@keyframes spinner-l7 {
|
|
to {
|
|
transform: rotate(.5turn)
|
|
}
|
|
}
|
|
|
|
&.spinner8 {
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
--spinner8: #f03355;
|
|
color: var(--spinner8);
|
|
--_c: no-repeat radial-gradient(farthest-side, currentColor 92%, #0000);
|
|
background:
|
|
var(--_c) 50% 0 /12px 12px,
|
|
var(--_c) 50% 100%/12px 12px,
|
|
var(--_c) 100% 50%/12px 12px,
|
|
var(--_c) 0 50%/12px 12px,
|
|
var(--_c) 50% 50%/12px 12px,
|
|
conic-gradient(from 90deg at 4px 4px, #0000 90deg, currentColor 0) -4px -4px/calc(50% + 2px) calc(50% + 2px);
|
|
animation: spinner-l8 1s infinite linear;
|
|
}
|
|
|
|
@keyframes spinner-l8 {
|
|
to {
|
|
transform: rotate(.5turn)
|
|
}
|
|
}
|
|
|
|
&.spinner9 {
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
--spinner9_0: #f03355;
|
|
--spinner9_1: #ccc;
|
|
background:
|
|
radial-gradient(farthest-side, var(--spinner9_0) 95%, #0000) 50% 1px/12px 12px no-repeat,
|
|
radial-gradient(farthest-side, #0000 calc(100% - 14px), var(--spinner9_1) 0);
|
|
animation: spinner-l9 2s infinite linear;
|
|
}
|
|
|
|
@keyframes spinner-l9 {
|
|
to {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
|
|
&.spinner10 {
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
padding: 6px;
|
|
--spinner10: #000;
|
|
color: var(--spinner10);
|
|
background:
|
|
conic-gradient(from 135deg at top, currentColor 90deg, #0000 0) 0 calc(50% - 4px)/17px 8.5px,
|
|
radial-gradient(farthest-side at bottom left, #0000 calc(100% - 6px), currentColor calc(100% - 5px) 99%, #0000) top right/50% 50% content-box content-box,
|
|
radial-gradient(farthest-side at top, #0000 calc(100% - 6px), currentColor calc(100% - 5px) 99%, #0000) bottom /100% 50% content-box content-box;
|
|
background-repeat: no-repeat;
|
|
animation: spinner-l10 1s infinite linear;
|
|
}
|
|
|
|
@keyframes spinner-l10 {
|
|
100% {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
|
|
&.spinner11 {
|
|
margin: 0 auto;
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
display: grid;
|
|
--spinner11: #25b09b;
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
grid-area: 1/1;
|
|
--c: no-repeat radial-gradient(farthest-side, var(--spinner11) 92%, #0000);
|
|
background:
|
|
var(--c) 50% 0,
|
|
var(--c) 50% 100%,
|
|
var(--c) 100% 50%,
|
|
var(--c) 0 50%;
|
|
background-size: 12px 12px;
|
|
animation: spinner-l11 1s infinite;
|
|
}
|
|
|
|
&::before {
|
|
margin: 4px;
|
|
filter: hue-rotate(45deg);
|
|
background-size: 8px 8px;
|
|
animation-timing-function: linear
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-l11 {
|
|
100% {
|
|
transform: rotate(.5turn)
|
|
}
|
|
}
|
|
|
|
&.spinner12 {
|
|
margin: 0 auto;
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
display: grid;
|
|
border: 4px solid #0000;
|
|
border-radius: 50%;
|
|
border-color: #ccc #0000;
|
|
animation: spinner-l12 1s infinite linear;
|
|
--spinner12: #f03355;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
grid-area: 1/1;
|
|
margin: 2px;
|
|
border: inherit;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&::before {
|
|
border-color: var(--spinner12) #0000;
|
|
animation: inherit;
|
|
animation-duration: .5s;
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
&::after {
|
|
margin: 8px;
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-l12 {
|
|
100% {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
|
|
&.spinner13 {
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
--spinner13: #514b82;
|
|
--c: no-repeat radial-gradient(farthest-side, var(--spinner13) 92%, #0000);
|
|
background:
|
|
var(--c) 50% 0,
|
|
var(--c) 50% 100%,
|
|
var(--c) 100% 50%,
|
|
var(--c) 0 50%;
|
|
background-size: 10px 10px;
|
|
animation: spinner-l13 1s infinite;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
margin: 3px;
|
|
background: repeating-conic-gradient(#0000 0 35deg, var(--spinner13) 0 90deg);
|
|
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-l13 {
|
|
100% {
|
|
transform: rotate(.5turn)
|
|
}
|
|
}
|
|
|
|
|
|
&.spinner14 {
|
|
margin: 0 auto;
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
display: grid;
|
|
--spinner14: #854f1d;
|
|
color: var(--spinner14);
|
|
background: radial-gradient(farthest-side, currentColor calc(100% - 6px), #0000 calc(100% - 5px) 0);
|
|
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 13px), #000 calc(100% - 12px));
|
|
border-radius: 50%;
|
|
animation: spinner-l14 2s infinite linear;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
grid-area: 1/1;
|
|
background:
|
|
linear-gradient(currentColor 0 0) center,
|
|
linear-gradient(currentColor 0 0) center;
|
|
background-size: 100% 10px, 10px 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
&::after {
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-l14 {
|
|
100% {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
|
|
&.spinner15 {
|
|
--d: 44rpx;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
--spinner15: #25b09b;
|
|
color: var(--spinner15);
|
|
box-shadow:
|
|
calc(1*var(--d)) calc(0*var(--d)) 0 0,
|
|
calc(0.707*var(--d)) calc(0.707*var(--d)) 0 1px,
|
|
calc(0*var(--d)) calc(1*var(--d)) 0 2px,
|
|
calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
|
|
calc(-1*var(--d)) calc(0*var(--d)) 0 4px,
|
|
calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
|
|
calc(0*var(--d)) calc(-1*var(--d)) 0 6px;
|
|
animation: spinner-l15 1s infinite steps(8);
|
|
}
|
|
|
|
@keyframes spinner-l15 {
|
|
100% {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
|
|
&.spinner16 {
|
|
width: 100rpx;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
border: 8px solid #0000;
|
|
--spinner16: #ffa50097;
|
|
border-right-color: var(--spinner16);
|
|
position: relative;
|
|
animation: spinner-l16 1s infinite linear;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -8px;
|
|
border-radius: 50%;
|
|
border: inherit;
|
|
animation: inherit;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
&:after {
|
|
animation-duration: 4s;
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-l16 {
|
|
100% {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
} |