.loader_container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	z-index: 100;
	display: flex;
	align-items: center;
}

.loader {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	position: relative;
	animation: loader 5s linear infinite;
}
.loader div {
	height: 5vw;
	max-height: 100%;
	width: 2vw;
	max-width: 100%;
	margin: auto;
	border-radius: 0vw 10vw 0vw 10vw;
	box-shadow:
		inset 0vw 0vw 0vw 0.1vw #2218e6,
		0vw 0vw 1.5vw 0vw #4f18e6;
	overflow: auto;
	position: absolute;
}
.loader .one {
	transform: rotate(45deg);
	left: 0;
	right: 0;
	top: 0;
	bottom: 7.5vw;
	animation: animate 1s ease infinite;
	background: blue;
}
.loader .two {
	transform: rotate(90deg);
	left: 5.5vw;
	right: 0;
	top: 0;
	bottom: 5.5vw;
	animation: animate 1s 0.125s ease infinite;
	background: blue;
}
.loader .three {
	transform: rotate(135deg);
	left: 7.5vw;
	right: 0;
	top: 0;
	bottom: 0;
	animation: animate 1s 0.25s ease infinite;
	background: blue;
}
.loader .four {
	transform: rotate(180deg);
	left: 5.5vw;
	right: 0;
	top: 5.5vw;
	bottom: 0;
	animation: animate 1s 0.375s ease infinite;
	background: yellow;
}
.loader .five {
	transform: rotate(225deg);
	left: 0;
	right: 0;
	top: 7.5vw;
	bottom: 0;
	animation: animate 1s 0.5s ease infinite;
	background: yellow;
}
.loader .six {
	transform: rotate(270deg);
	left: 0;
	right: 5.5vw;
	top: 5.5vw;
	bottom: 0;
	animation: animate 1s 0.625s ease infinite;
	background: red;
}
.loader .seven {
	transform: rotate(315deg);
	left: 0;
	right: 7.5vw;
	top: 0;
	bottom: 0;
	animation: animate 1s 0.75s ease infinite;
	background: red;
}
.loader .eight {
	transform: rotate(360deg);
	left: 0;
	right: 5.5vw;
	top: 0;
	bottom: 5.5vw;
	animation: animate 1s 0.875s ease infinite;
	background: red;
}
@keyframes loader {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}
@keyframes animate {
	50% {
		box-shadow:
			inset 0vw 0vw 0vw 0.1vw red,
			0vw 0vw 1.5vw 0vw yellow;
	}
}

.img-preloader {
	position: absolute;
	background: black;
}