epmet-resi-rizhao/assets/scss/m/loading.scss

//引入全局配置
@import '../c/conf';
@import '../c/mx';
@keyframes u-loading-1 {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}
@keyframes u-loading-2 {
	from {
		transform: rotate(135deg);
	}

	to {
		transform: rotate(135deg + 360deg);
	}
}
@keyframes u-loading-3 {
	from {
		transform: rotate(360deg - 135deg);
	}

	to {
		transform: rotate(- 135deg);
	}
}
$u_loading_cd: 4s;
$u_loading_cd2: 2s;
$u_loading_w: 30px; //36

.u-loading {
	position: relative;
	width: $u_loading_w;
	height: $u_loading_w;
	margin: 50px auto;

	.ul-wrap {
		position: relative;
		width: $u_loading_w;
		height: $u_loading_w;
		animation: u-loading-1 $u_loading_cd linear infinite;
	}

	.ul-bar {
		position: absolute;
		display: block;
		width: $u_loading_w * 0.5;
		height: $u_loading_w;
		overflow: hidden;

		&::after {
			content: '';
			box-sizing: border-box;
			position: absolute;
			display: block;
			top: 0;
			width: $u_loading_w;
			height: $u_loading_w;
			border: 2px solid rgba($c1, 0.15);
			border-radius: 50%;
		}
	}

	.ul-bar-1 {
		top: 0;
		left: 0;

		&::after {
			left: 0;
			border-top-color: rgba($c1, 0.7);
			border-left-color: rgba($c1, 0.7);
			transform: rotate(135deg);
			animation: u-loading-2 $u_loading_cd2 linear infinite;
		}
	}

	.ul-bar-2 {
		top: 0;
		right: 0;

		&::after {
			right: 0;
			border-top-color: rgba($c1, 0.8);
			border-right-color: rgba($c1, 0.8);
			transform: rotate(-135deg);
			animation: u-loading-3 $u_loading_cd2 linear infinite;
		}
	}
}