merchapp/java-mall-app-shop-admin/components/favorite-loading/dots.scss

.favorite-loader {
	&.dots1 {
		width: 120rpx;
		aspect-ratio: 4;
		--dots1: #000;
		background: radial-gradient(circle closest-side, var(--dots1) 90%, #0000) 0/calc(100%/3) 100% space;
		clip-path: inset(0 100% 0 0);
		animation: dots-l1 1s steps(4) infinite;
	}

	@keyframes dots-l1 {
		to {
			clip-path: inset(0 -34% 0 0)
		}
	}

	&.dots2 {
		width: 120rpx;
		aspect-ratio: 4;
		--dots2: #000;
		background: radial-gradient(circle closest-side, var(--dots2) 90%, #0000) 0/calc(100%/3) 100% no-repeat;
		animation: dots-l2 1s steps(3) infinite;
	}

	@keyframes dots-l2 {
		to {
			background-position: 150%
		}
	}

	&.dots3 {
		width: 120rpx;
		aspect-ratio: 2;
		--dots3: #000;
		background:
			no-repeat radial-gradient(circle closest-side, var(--dots3) 90%, #0000) 0% 50%,
			no-repeat radial-gradient(circle closest-side, var(--dots3) 90%, #0000) 50% 50%,
			no-repeat radial-gradient(circle closest-side, var(--dots3) 90%, #0000) 100% 50%;
		background-size: calc(100%/3) 50%;
		animation: dots-l3 1s infinite linear;
	}

	@keyframes dots-l3 {
		20% {
			background-position: 0% 0%, 50% 50%, 100% 50%
		}

		40% {
			background-position: 0% 100%, 50% 0%, 100% 50%
		}

		60% {
			background-position: 0% 50%, 50% 100%, 100% 0%
		}

		80% {
			background-position: 0% 50%, 50% 50%, 100% 100%
		}
	}

	&.dots4 {
		width: 120rpx;
		aspect-ratio: 4;
		--dots4: #000;
		background:
			radial-gradient(circle closest-side at left 6px top 50%, var(--dots4) 90%, #0000),
			radial-gradient(circle closest-side, var(--dots4) 90%, #0000),
			radial-gradient(circle closest-side at right 6px top 50%, var(--dots4) 90%, #0000);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		animation: dots-l4 1s infinite alternate;
	}

	@keyframes dots-l4 {
		to {
			width: 25px;
			aspect-ratio: 1
		}
	}

	&.dots5 {
		width: 30rpx;
		aspect-ratio: 1;
		border-radius: 50%;
		--dots5: #000;
		animation: dots-l5 1s infinite linear alternate;
	}

	@keyframes dots-l5 {
		0% {
			box-shadow: 20px 0 var(--dots5), -20px 0 #0002;
			background: var(--dots5);
		}

		33% {
			box-shadow: 20px 0 var(--dots5), -20px 0 #0002;
			background: #0002;
		}

		66% {
			box-shadow: 20px 0 #0002, -20px 0 var(--dots5);
			background: #0002;
		}

		100% {
			box-shadow: 20px 0 #0002, -20px 0 var(--dots5);
			background: var(--dots5)
		}
	}

	&.dots6 {
		width: 30rpx;
		aspect-ratio: 1;
		--dots6: #000;
		background: var(--dots6);
		border-radius: 50%;
		animation: dots-l6 1s infinite linear alternate;
	}

	@keyframes dots-l6 {
		0% {
			box-shadow: 15px 0, -25px 0;
		}

		50% {
			box-shadow: 15px 0, -15px 0;
		}

		100% {
			box-shadow: 25px 0, -15px 0;
		}
	}

	&.dots7 {
		width: 120rpx;
		aspect-ratio: 4;
		--dots7: #000;
		background:
			no-repeat radial-gradient(circle closest-side, var(--dots7) 90%, #0000) 0% 50%,
			no-repeat radial-gradient(circle closest-side, var(--dots7) 90%, #0000) 50% 50%,
			no-repeat radial-gradient(circle closest-side, var(--dots7) 90%, #0000) 100% 50%;
		background-size: calc(100%/3) 100%;
		animation: dots-l7 1s infinite linear;
	}

	@keyframes dots-l7 {
		33% {
			background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%
		}

		50% {
			background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%
		}

		66% {
			background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%
		}
	}

	&.dots8 {
		width: 30rpx;
		aspect-ratio: 1;
		position: relative;
		--dots8: #000;

		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: 50%;
			background: var(--dots8);
		}

		&::before {
			box-shadow: -25px 0;
			animation: dots-l8-1 1s infinite linear;
		}

		&::after {
			transform: rotate(0deg) translateX(25px);
			animation: dots-l8-2 1s infinite linear;
		}
	}

	@keyframes dots-l8-1 {
		100% {
			transform: translateX(25px)
		}
	}

	@keyframes dots-l8-2 {
		100% {
			transform: rotate(-180deg) translateX(25px)
		}
	}

}