自定义圆点旋转加载样式

更多样式：点击查看

效果

模板

<div class="loader">
	<svg viewBox="0 0 80 80">
		<circle r="32" cy="40" cx="40" id="test"></circle>
	</svg>
</div>

<div class="loader">
	<svg viewBox="0 0 80 80">
		<rect height="64" width="64" y="8" x="8"></rect>
	</svg>
</div>

样式

.loader {
	--path: #2f3545;
	--dot: #5628ee;
	--duration: 3s;
	width: 44px;
	height: 44px;
	position: relative;
	display: inline-block;
	margin: 0 16px;

	&:before {
		position: absolute;
		top: 37px;
		left: 19px;
		width: 6px;
		height: 6px;
		content: "";
		border-radius: 50%;
		background: var(--dot);
		transform: translate(-18px, -18px);
		animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
	}

	svg {
		display: block;
		width: 100%;
		height: 100%;

		rect,
		polygon,
		circle {
			fill: none;
			stroke: var(--path);
			stroke-width: 10px;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		circle {
			stroke-dashoffset: 75;
			animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
			stroke-dasharray: 150 50 150 50;
		}

		rect {
			stroke-dashoffset: 0;
			animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
			stroke-dasharray: 192 64 192 64;
		}
	}
}

@keyframes dotRect {
	25% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(18px, -18px);
	}

	75% {
		transform: translate(0, -36px);
	}

	100% {
		transform: translate(-18px, -18px);
	}
}

@keyframes pathRect {
	25% {
		stroke-dashoffset: 64;
	}

	50% {
		stroke-dashoffset: 128;
	}

	75% {
		stroke-dashoffset: 192;
	}

	100% {
		stroke-dashoffset: 256;
	}
}

@keyframes pathCircle {
	25% {
		stroke-dashoffset: 125;
	}

	50% {
		stroke-dashoffset: 175;
	}

	75% {
		stroke-dashoffset: 225;
	}

	100% {
		stroke-dashoffset: 275;
	}
}