ide_loading.css

.nowloading_back {
	display			:none;
	position		:fixed;
	top				:-5vh;
	left			:-5vw;
	width			:110vw;
	height			:120vh;
	z-index			:1000;
	background:rgba(60,60,60,0.5);
}

.nowloading {
	position		:absolute;
	top				:0;
	left			:0;
	right			:0;
	bottom			:0;
	margin			:auto;
	width			:180px;
	height			:210px;
	z-index			:1001;
}

.nowloading_text{
	display			:inline-block;
	position		:absolute;
	bottom			:5px;
	font-weight		:800;
	font-size		:18px;
	height			:18px;
	width			:15px;
	color			:#fafafa;
	text-shadow		:1px 1px 0px #308030;
}


#ld0{
	left:10px;
}

#ld1{
	left:24px;
}

#ld2{
	left:38px;
}

#ld3{
	left:50px;
}

#ld4{
	left:64px;
}

#ld5{
	left:78px;
}

#ld6{
	left:92px;
}

#ld7{
	left:102px;
}

#ld8{
	left:116px;
}

#ld9{
	left:134px;
}

#ld10{
	left:148px;
}

#ld11{
	left:162px;
}

#ld12{
	left:176px;
}


.main_circle {
	position		: absolute;
	top				:0;
	left			:0;
	width			:180px;
	height			:180px;
	border-radius	:50%;
	background		:linear-gradient(135deg, #cccccc, #aaaaaa);
	box-shadow		:2px 2px 0pxrgba(30,30,30,1) 
	z-index			:1002;
}

.mid_circle {
	position		: absolute;
	top				:0;
	left			:0;
	right			:0;
	bottom			:0;
	margin			:auto;
	width			:150px;
	height			:150px;

	box-shadow		:2px 2px 0px 0px rgba(10,10,10,0.6) ;

	border-radius	:50%;
	background		:linear-gradient(135deg, #bbbbbb, #999999);
	z-index			:1003;
}

 .circle {
	position		: absolute;
	top				:0;
	left			:0;
	right			:0;
	bottom			:0;
	margin			:auto;
	border-radius	:50%;
	width			:120px;
	height			:120px;
	background		:linear-gradient(135deg, #00a000, #004000);
	z-index			:1004;
}

.box_1{
  position:relative;
  width:100px;
  height:100px;
  background:#000000;
}

.point{
	display		:inline-block;
	position	:absolute;
	top			:0;
	left		:0;
	right		:0;
	bottom		:0;
	margin		:auto;

	background	:#fffff0;
	border		:1px solid #fffff0;
	height		:6px;
	width		:6px;
	border-radius:50%;
	z-index		:1007;
}

.point2{
	display		:inline-block;
	position	:absolute;
	top			:0;
	left		:0;
	right		:0;
	bottom		:0;
	margin		:auto;

	background	:#fffff0;
	height		:4px;
	width		:4px;
	border-radius:50%;
	box-shadow	:0 0 8px 8px rgba(255,255,250,1);
	z-index		:1006;
}

.line_a{
	display		:none;
	position	:absolute;
	bottom		:17px;
	left		:0;
	right		:0;
	margin		:auto;
	z-index		:1005;
	height		:0px;
	width		:2px;
	background	: rgba(255,255,250,1);
	box-shadow:
	 2px 0px 3px 1px rgba(255,255,250,0.9),
	-2px 0px 3px 1px rgba(255,255,250,0.9);

}

.line_b{
	display		:none;
	position	:absolute;
	top			:30px;
	left		:38px;
	z-index		:1005;
	height		:0px;
	width		:2px;
	background	: rgba(255,255,250,1);
	box-shadow:
	 2px 0px 3px 1px rgba(255,255,250,0.9),
	-2px 0px 3px 1px rgba(255,255,250,0.9);
}

.line_c{
	display		:none;
	position	:absolute;
	top			:30px;
	right		:38px;
	z-index		:1005;
	height		:0px;
	width		:2px;
	background	: rgba(255,255,250,1);
	box-shadow:
	 2px 0px 3px 1px rgba(255,255,250,0.9),
	-2px 0px 3px 1px rgba(255,255,250,0.9);
}


.line_d{
	display		:none;
	position	:absolute;
	bottom		:77px;
	right		:75px;
	z-index		:1005;
	height		:0px;
	transform: rotate(-39deg);
	transform-origin:right bottom;
	width		:2px;
	background	: rgba(255,255,250,1);
	box-shadow:
	 2px 0px 3px 1px rgba(255,255,250,0.9),
	-2px 0px 3px 1px rgba(255,255,250,0.9);
}

.line_e{
	display		:none;
	position	:absolute;
	top			:77px;
	left		:72px;
	z-index		:1005;
	height		:0px;
	transform: rotate(39deg);
	transform-origin:right top;
	width		:2px;
	background	: rgba(255,255,250,1);
	box-shadow:
	 2px 0px 3px 1px rgba(255,255,250,0.9),
	-2px 0px 3px 1px rgba(255,255,250,0.9);
}

.line_f{
	display		:none;
	position	:absolute;
	top			:77px;
	left		:75px;
	z-index		:1005;
	height		:0px;
	transform	: rotate(-39deg);
	transform-origin:left top;
	width		:2px;
	background	: rgba(255,255,250,1);
	box-shadow:
	 2px 0px 3px 1px rgba(255,255,250,0.9),
	-2px 0px 3px 1px rgba(255,255,250,0.9);
}

.line_g{
	display		:none;
	position	:absolute;
	bottom		:30px;
	left		:40px;
	z-index		:1005;
	height		:2px;
	width		:0px;
	background	: rgba(255,255,250,1);
	box-shadow:
	 2px 0px 3px 1px rgba(255,255,250,0.9),
	-2px 0px 3px 1px rgba(255,255,250,0.9);
}

svg {
	transform: rotate(-90deg);
}

circle {
    fill: transparent;
    stroke: #fffff0;
    stroke-width: 3;
    animation: circle 2s;
}

@keyframes circle {
	0% { stroke-dasharray: 0 377; }
	99.9%{ stroke-dasharray: 377 377; }
}