base.less

@loading-size: 140px;

#loading-area {
	//display: none;
	position: fixed;
	width: @loading-size;
	height: @loading-size;
	margin-left: -@loading-size / 2;
	margin-top: -@loading-size / 2;
	top: 50%;
	left: 50%;
	z-index: 9999;
	user-select: none;
}

.spinner {
	width: 100%;
	height: 100%;
	position: relative;

	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.spinner-container {
	.approach
	{
		width: 64px;
		height: 64px;
		border-radius: 100%;
		border: 3px solid;
		position: absolute;
		-webkit-animation: approach 2.0s infinite linear;
		animation: approach 2.0s infinite linear;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;

		&.AC1 { top: 0; left: 0; color: #8866ee; }
		&.AC2 { top: 0; right: 0; color: #ff55cc; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
		&.AC3 { right: 0; bottom: 0; color: #66ccff; -webkit-animation-delay: 1s; animation-delay: 1s; }
		&.AC4 { left: 0; bottom: 0; color: #ffcc22; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
	}

	.hit
	{
		width: 64px;
		height: 64px;
		border-radius: 100%;
		position: absolute;
		-webkit-animation: burst 2.0s infinite linear;
		animation: burst 2.0s infinite linear;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;

		&.HC1 { top: 0; left: 0; background-color: #8866ee; }
		&.HC2 { top: 0; right: 0; background-color: #ff55cc; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
		&.HC3 { right: 0; bottom: 0; background-color: #66ccff; -webkit-animation-delay: 1s; animation-delay: 1s; }
		&.HC4 { left: 0; bottom: 0; background-color: #ffcc22; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
	}
}

@-webkit-keyframes burst {
	0% {
		-webkit-transform: scale(0.5);
		-webkit-opacity: 0.0;
	}

	20% {
		-webkit-transform: scale(0.5);
		-webkit-opacity: 1.0;
	}

	40%, 100% {
		-webkit-transform: scale(1.0);
		-webkit-opacity: 0.0;
	}
}

@-webkit-keyframes approach {
	0% {
		-webkit-transform: scale(1.0);
		-webkit-opacity: 0.0;
	}

	20% {
		-webkit-transform: scale(0.5);
		-webkit-opacity: 1.0;
	}

	20.1%, 100% {
		-webkit-transform: scale(0.5);
		-webkit-opacity: 0.0;
	}
}

@keyframes approach {
	0% {
		transform: scale(1.0);
		opacity: 0.0;
	}

	20% {
		transform: scale(0.5);
		opacity: 1.0;
	}

	20.1%, 100% {
		transform: scale(0.5);
		opacity: 0.0;
	}
}

@keyframes burst {
	0% {
		transform: scale(0.5);
		opacity: 0.0;
	}

	20% {
		transform: scale(0.5);
		opacity: 1.0;
	}

	40%, 100% {
		transform: scale(1.0);
		opacity: 0.0;
	}
}