#plLoadingBar {
	z-index: 99999;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display:none;
	top:0;
	left:0;
}

#plLoadingBar .loading1 {
	border:4px solid transparent;
	border-top:4px solid #2189FF;
	border-radius: 50%;
	position:fixed;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	width:60px;
	height:60px;
	animation-name:spinCircleA;
	animation-duration:1.6s;
	animation-iteration-count:infinite;
}

#plLoadingBar .loading2 {
	border:4px solid transparent;
	border-top:4px solid #2189FF;
	border-radius: 50%;
	position:fixed;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	width:60px;
	height:60px;
	animation-name:spinCircleB1, spinCircleB2, sprinCircleB3;
	animation-duration:0.4s, 0.8s, 0.4s;
	animation-iteration-count:infinite;
}

@keyframes spinCircleA {
	from {
		transform:translate(-50%, -50%) rotate(0);
	}
	to {
		transform:translate(-50%, -50%) rotate(720deg);
	}
}

@keyframes spinCircleB1 {
	from {
		transform:translate(-50%, -50%) rotate(0);
	}
	to {
		transform:translate(-50%, -50%) rotate (315deg);
	}
}

@keyframes spinCircleB2 {
	from {
		transform:translate(-50%, -50%) rotate(315deg);
	}
	to {
		transform:translate(-50%, -50%) rotate (485deg);
	}
}

@keyframes spinCircleB3 {
	from {
		transform:translate(-50%, -50%) rotate(485deg);
	}
	to {
		transform:translate(-50%, -50%) rotate (720deg);
	}
}

@media screen and (max-device-width: 767px) {
	#plLoadingBar .loading1, #plLoadingBar .loading2 {
		width:40px;
		height:40px;
}