.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)
		}
	}
}