手写一个炫酷的loading效果

效果图：

代码如下：

<div class="wrapper">
	<div class="circle-body">
		<div class="circle"></div>
		<div class="circle"></div>
		<div class="circle"></div>
	</div>
	<div class="circle-loading">
		Loading
		<span class="loading__dot">.</span>
		<span class="loading__dot">.</span>
		<span class="loading__dot">.</span>
	</div>
</div>

 

*{margin: 0; padding: 0;}
.wrapper {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    width: 100vw;
    height: 100vh;
	position: relative;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
	.circle-body {
		height: 500px;
		width: 500px;
		padding: 3px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		overflow: hidden;
		box-sizing: border-box;
		.circle {
			position: absolute;
			display: block;
			border-radius: 50%;
			border: 10px solid #fffc00;
			&:nth-child(1) {
				height: 350px;
				width: 350px;
				animation: animate1 1.5s infinite linear, borderColor 1.5s 0.2s infinite linear;
				border-width: 10px;
				opacity: 0.9;
			}
			&:nth-child(2) {
				height: calc(350px * 0.65);
				width: calc(350px * 0.65);
				animation: animate2 1.5s infinite linear, borderColor 1.5s 1s infinite linear;
				border-width: 8px;
				opacity: 0.7;
			}
			&:nth-child(3) {
				height: calc(350px * 0.45);
				width: calc(350px * 0.45);
				animation: animate3 1.5s infinite linear, borderColor 1.5s 1.5s infinite linear;
				border-width: 6px;
				opacity: 0.5;
			}
		}
	}

	.circle-loading {
		box-sizing: border-box;
		position: absolute;
		font-size: 26px;
		color: #fffc00;

		.loading__dot {
			animation: 1s loading infinite;
		}
		.loading__dot:nth-child(2) {
			animation-delay: 250ms;
		}
		.loading__dot:nth-child(3) {
			animation-delay: 500ms;
		}
	}
}

@keyframes borderColor {
	0% {
		border-color: #fffc00;
	}
	15% {
		border-color: #0fb34e;
	}
	30% {
		border-color: #0b669b;
	}
	45% {
		border-color: #4c0983;
	}
	60% {
		border-color: #a30c8f;
	}
	75% {
		border-color: #a30c39;
	}
	100% {
		border-color: #fffc00;
	}
}

@keyframes animate1 {
	0% {
		transform: rotateZ(20deg) rotateY(0deg);
	}
	100% {
		transform: rotateZ(100deg) rotateY(360deg);
	}
}
@keyframes animate2 {
	0% {
		transform: rotateZ(100deg) rotateX(0deg);
	}
	100% {
		transform: rotateZ(0deg) rotateX(360deg);
	}
}
@keyframes animate3 {
	0% {
		transform: rotateZ(100deg) rotateX(-360deg);
	}
	100% {
		transform: rotateZ(-360deg) rotateX(360deg);
	}
}

@keyframes loading {
	50% {
		color: transparent;
	}
}