.p5-loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	.p5-loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1001;
	}
	.p5-loading-con {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 1002;
		transform: scale(1);
	}
}

/*默认类型*/
.p5-loading-con {
	.p5-loading-spinner {
		position: absolute;
		top: 0;
		width: 12px;
		height: 5px;
		border-radius: 2px;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
		@include lightbgcolor;
		transform-origin: left center 0;
		animation: p5-loading-spinner-opacity 1s linear infinite;
	}
	.p5-loading-spinner1 {
		transform: rotate(0deg) translateX(10px);
		animation-delay: -1s;
	}
	.p5-loading-spinner2 {
		transform: rotate(30deg) translateX(10px);
		animation-delay: -0.923077s;
	}
	.p5-loading-spinner3 {
		transform: rotate(60deg) translateX(10px);
		animation-delay: -0.846154s;
	}
	.p5-loading-spinner4 {
		transform: rotate(90deg) translateX(10px);
		animation-delay: -0.769231s;
	}
	.p5-loading-spinner5 {
		transform: rotate(120deg) translateX(10px);
		animation-delay: -0.692308s;
	}
	.p5-loading-spinner6 {
		transform: rotate(150deg) translateX(10px);
		animation-delay: -0.615385s;
	}
	.p5-loading-spinner7 {
		transform: rotate(180deg) translateX(10px);
		animation-delay: -0.538462s;
	}
	.p5-loading-spinner8 {
		transform: rotate(210deg) translateX(10px);
		animation-delay: -0.461538s;
	}
	.p5-loading-spinner9 {
		transform: rotate(240deg) translateX(10px);
		animation-delay: -0.384615s;
	}
	.p5-loading-spinner10 {
		transform: rotate(270deg) translateX(10px);
		animation-delay: -0.307692s;
	}
	.p5-loading-spinner11 {
		transform: rotate(300deg) translateX(10px);
		animation-delay: -0.230769s;
	}
	.p5-loading-spinner12 {
		transform: rotate(330deg) translateX(10px);
		animation-delay: -0.153846s;
	}
}
@keyframes p5-loading-spinner-opacity {
	0%,
	39%,
	100% {
		opacity: 0.25;
	}
	40% {
		opacity: 1;
	}
}

/*小球类型*/
.p5-loading-con {
	.p5-loading-ball-wrap {
		width: 74px;
		height: 74px;
		transform: translate(-50%, -50%);
	}
	.p5-loading-ball {
		position: absolute;
		width: 74px;
		height: 74px;
		opacity: 0;
		transform: rotate(225deg);
		animation: p5-loading-ballanimate 3.9325s infinite;
		.p5-loading-innerball {
			position: absolute;
			width: 10px;
			height: 10px;
			@include lightbgcolor;
			left: 0px;
			top: 0px;
			border-radius: 10px;
		}
	}
	.p5-loading-ball1 {
		animation-delay: 0.856s;
	}
	.p5-loading-ball2 {
		animation-delay: 0.173s;
	}
	.p5-loading-ball3 {
		animation-delay: 0.3465s;
	}
	.p5-loading-ball4 {
		animation-delay: 0.5095s;
	}
	.p5-loading-ball5 {
		animation-delay: 0.693s;
	}
}
@keyframes p5-loading-ballanimate {
	0% {
		opacity: 1;
		z-index: 99;
		transform: rotate(180deg);
		animation-timing-function: ease-out;
	}
	7% {
		opacity: 1;
		transform: rotate(300deg);
		animation-timing-function: linear;
		origin: 0%;
	}
	30% {
		opacity: 1;
		transform: rotate(410deg);
		animation-timing-function: ease-in-out;
		origin: 7%;
	}
	39% {
		opacity: 1;
		transform: rotate(645deg);
		animation-timing-function: linear;
		origin: 30%;
	}
	70% {
		opacity: 1;
		transform: rotate(770deg);
		animation-timing-function: ease-out;
		origin: 39%;
	}
	75% {
		opacity: 1;
		transform: rotate(900deg);
		animation-timing-function: ease-out;
		origin: 70%;
	}
	76% {
		opacity: 0;
		transform: rotate(900deg);
	}
	100% {
		opacity: 0;
		transform: rotate(900deg);
	}
}

/*圆环类型*/
.p5-loading-ring {
	position: absolute;
	width: 58px;
	height: 58px;
	border-width: 5px;
	border-style: solid;
	@include lightbrcolor;
	border-radius: 58px;
	transform: translate(-50%, -50%);
}
.p5-loading-bowwrap {
	position: absolute;
	width: 16px;
	height: 58px;
	left: 21px;
	top: 0px;
	animation: p5-loading-bowanimate 1.5s infinite linear;
}
.p5-loading-bow {
	position: absolute;
	left: 0px;
	top: -14px;
	width: 23px;
	height: 23px;
	@include lightbgcolor;
	border-radius: 19px;
}
@keyframes p5-loading-bowanimate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/*长方条*/
.p5-loading-con {
	.p5-loading-rect-box {
		width: 60px;
		overflow: hidden;
		transform: translate(-50%, -50%);
		.p5-loading-rect {
			@include lightbgcolor;
			height: 60px;
			width: 6px;
			display: block;
			float: left;
			margin-left: 6px;
			animation: stretchdelay 1.2s infinite ease-in-out;
		}
		.p5-loading-rect2 {
			animation-delay: -1.1s;
		}
		.p5-loading-rect3 {
			animation-delay: -1.0s;
		}
		.p5-loading-rect4 {
			animation-delay: -0.9s;
		}
		.p5-loading-rect5 {
			animation-delay: -0.8s;
		}
	}
}
@keyframes stretchdelay {
	0%,
	40%,
	100% {
		transform: scaleY(0.4);
	}
	20% {
		transform: scaleY(1.0);
	}
}

/*旋转的正方形*/
.p5-loading-rotatePlane {
	width: 60px;
	height: 60px;
	@include lightbgcolor;
	animation: rotateplane 1.2s infinite ease-in-out;
	transform: translate(-50%, -50%);
}
@keyframes rotateplane {
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(180deg) rotateX(180deg);
	}
}