几种页面Loading动画

[louzhedong]

案例一

方案预览

// html
<div class="loading-content">
	<div class="loading-dot"></div>
	<div class="loading-dot"></div>
	<div class="loading-dot"></div>
</div>

// css
.loading-content {
	display: flex;
	justify-content: center;
	.loading-dot {
		width: 20px;
		height: 20px;
		background: #8385aa;
		border-radius: 50%;
		margin: 150px  10px;
		animation: bouncing-animate 0.6s infinite alternate;
		&:nth-child(2) {
			animation-delay: 0.2s;
		}
		&:nth-child(3) {
			animation-delay: 0.4s;
		}
	}
}

@keyframes bouncing-animate {
	to {
		opacity: 0.1;
		transform: translate3d(0, -50px, 0);
	}
}

方案二

方案预览

// html
<div class="donut"></div>

// css
.donut {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 4px solid rgba(0,0,0,0.1);
	margin: 30px;
	border-left-color: #7983ff;
	animation: donut-spin 1.2s linear infinite;
}

@keyframes donut-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}