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