自定义加载样式

更多样式：点击查看

效果

模板代码

<div class="loader"><svg version="1.1">
		<defs>
			<filter id="goo">
				<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"></feGaussianBlur>
				<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
					result="goo"></feColorMatrix>
				<feBlend in="SourceGraphic" in2="goo"></feBlend>
			</filter>
		</defs>
	</svg>
</div>

样式代码

.loader {
	position: relative;
	width: 1.5em;
	aspect-ratio: 1/2;
	filter: url(#goo);

	&::before,
	&::after {
		content: '';
		position: absolute;
		inset: 0;
		margin: auto;
		width: 100%;
		aspect-ratio: 1/1;
		border-radius: 50%;
		animation: loader 1.5s ease-out infinite;
	}

	&::before {
		background: linear-gradient(rgb(255, 206, 58), rgb(66, 181, 73));
	}

	&::after {
		animation-delay: 0.75s;
		background: linear-gradient(to top, rgb(114, 223, 231), rgb(66, 181, 73));
	}
}

#goo {
	display: none;
}

@keyframes loader {

	0%,
	50%,
	100% {
		transform: translateY(0);
	}

	25% {
		transform: translateY(70%);
	}

	75% {
		transform: translateY(-70%);
	}
}