html前端数据加载的loading效果

<div class="loading">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>

<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	
	.loading{
		height: 40px;
		margin: 100px auto;
		display: flex;
		justify-content: center;
	}
	.loading span{
		width: 8px;
		height: 100%;
		border-radius: 4px;
		background-color: lightgreen;
		animation: load 1s ease infinite;
		margin: 0 2px;
	}
	@keyframes load{
		0%,
		100% {
			transform: scaleY(1.5);
			background-color: lightgreen;
		}
		50% {
			transform: scaleY(1);
			background-color: lightblue;
		}
	}
	
	.loading span:nth-child(2){
		animation-delay: 0.2s;
	}
	.loading span:nth-child(3){
		animation-delay: 0.4s;
	}
	.loading span:nth-child(4){
		animation-delay: 0.6s;
	}
	.loading span:nth-child(5){
		animation-delay: 0.8s;
	}

</style>