.loading {
	position: absolute;
	top:0;
	left: 0;
	width: 100vw;
	height: calc(100vh - 60px);
	border: 0px solid chocolate;
	box-sizing: border-box;
	margin: 60px auto 0;
	background: var(--white-f-color);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99;
	transition: all .2s;
}

.loading i {
	width: 8px;
	height: 32px;
	margin: 4px;
	border-radius: 4px;
	background-color: var(--black-5-color);
}

@keyframes loading {
	0% {
		transform: scaleY(1);
	}

	50% {
		transform: scaleY(0.5);
	}

	100% {
		transform: scaleY(1);
	}
}

.loading i:nth-child(1) {
	-webkit-animation: loading .8s ease-in 0s infinite;
}

.loading i:nth-child(2) {
	-webkit-animation: loading .8s ease-in 0.1s infinite;
}

.loading i:nth-child(3) {
	-webkit-animation: loading .8s ease-in 0.2s infinite;
}

.loading i:nth-child(4) {
	-webkit-animation: loading .8s ease-in 0.3s infinite;
}

.loading i:nth-child(5) {
	-webkit-animation: loading .8s ease-in 0.4s infinite;
}