.loading-page {
    background: #141414;
    width: 100%;
    height: 100%;
    z-index: 9999999999;
    position: fixed;
	top: 0;
    left: 0;
}
	
.loading-page .main-circle{
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.loader-box .main-circle{
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
	
.loading-page .circle,
.loader-box .circle {
	border-radius: 50%;
	position: absolute;
	border-top-width: 2px; 
	border-top-style:solid;
	border-bottom: 2px solid transparent;
	border-left-width: 2px;
	border-left-style: solid;
	border-right: 2px solid transparent;
	animation: animate 2s infinite;	
}

.loader-box .circle {
	border-top-color: rgb(129,130, 134); 
	border-left-color: rgb(129,130, 134);
}

.loading-page .circle_one,
.loader-box .circle_one {
	left: calc(100% * 0.36);
	top: calc(100% * 0.36);
	width: calc(100% * 0.25);
	height: calc(100% * 0.25);
}
	
.loading-page .circle_two,
.loader-box .circle_two {
	left: calc(100% * 0.24);
	top: calc(100% * 0.24);
	width: calc(100% * 0.5);
	height: calc(100% * 0.5);
	animation-delay: 0.2s;
}
	
.loading-page .circle_three,
.loader-box .circle_three {
	left: calc(100% * 0.12);
	top: calc(100% * 0.12);
	width: calc(100% * 0.75);
	height: calc(100% * 0.75);
	animation-delay: 0.4s;
}

.loading-page .circle_four,
.loader-box .circle_four {
	width: 100%;
	height: 100%;
	animation-delay: 0.6s;
}

.loading-page[data-size="small"] .main-circle{width: 100px; height: 100px;}
.loading-page[data-size="medium"] .main-circle{width: 150px; height: 150px;}
.loading-page[data-size="large"] .main-circle{width: 200px; height: 200px;}


@keyframes animate {
	50% { transform: rotate(360deg) scale(0.8); }	
}