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

}