loading&cover

1放图片

.cover {
    &::before{
        display: flex;
        align-items: center;
        justify-content: center;
        content: '';
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(166, 177, 183, 0.6);
        z-index: 999;
    }
}

.loading {
	&::before{
		display: flex;
		align-items: center;
		justify-content: center;
		content: url(/images/loading.gif);
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: hsla(0,0%,100%,.96);
		z-index: 999;
	}
}

2纯css

loading-first {
	&::before{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		color: #81440e;
		font-weight: bold;
		content: '努力加载中...';
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: hsla(0,0%,100%,.96);
		// pointer-events: none; //不能用，否则点击会穿透该层
		z-index: 998;
	}
	&::after {
		content: '';
		position: fixed;
		top: 45%;
		left: 50%;
		border-radius: 50%;
		width: 0;
		height: 0;
		box-sizing: border-box;
		border: 30px solid $red;
		margin-left: -30px;
		margin-top: -45px;
		transform: translate(-15px);
		border-color: $red transparent rgba(255, 195, 0, 1) transparent;
		animation: lds-hourglass 1.2s infinite;
		z-index: 999;
	}
	@keyframes lds-hourglass {
		0% {
			transform: rotate(0);
			animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
		}
		50% {
			transform: rotate(900deg);
			animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		}
		100% {
			transform: rotate(1800deg);
		}
	}
}