#preloader {
	position: fixed;
	display: grid;
	place-items: center;
	background: #eee;
	width: 100%;
	height: 100%;
	z-index: 99999
}

.preloader-container {
	position: relative;
	width: 60px;
	height: 60px
}

.preloader-container .item {
	width: 30px;
	height: 30px;
	border: 6px solid;
	position: absolute
}

.preloader-container .item-1 {
	background-color: #fff;
	top: 0;
	left: 0;
	z-index: 1;
	border-color: #00bfff;
	animation: item-1_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite
}

.preloader-container .item-2 {
	background-color: #fff;
	top: 0;
	right: 0;
	border-color: #842ae3;
	animation: item-2_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite
}

.preloader-container .item-3 {
	background-color: #fff;
	bottom: 0;
	right: 0;
	z-index: 1;
	border-color: #00bfff;
	animation: item-3_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite
}

.preloader-container .item-4 {
	background-color: #fff;
	bottom: 0;
	left: 0;
	border-color: #842ae3;
	animation: item-4_move 1.8s cubic-bezier(.6, .01, .4, 1) infinite
}

@keyframes item-1_move {
	0%, 100% {
		transform: translate(0, 0)
	}

	25% {
		transform: translate(0, 30px)
	}

	50% {
		transform: translate(30px, 30px)
	}

	75% {
		transform: translate(30px, 0)
	}

}

@keyframes item-2_move {
	0%, 100% {
		transform: translate(0, 0)
	}

	25% {
		transform: translate(-30px, 0)
	}

	50% {
		transform: translate(-30px, 30px)
	}

	75% {
		transform: translate(0, 30px)
	}

}

@keyframes item-3_move {
	0%, 100% {
		transform: translate(0, 0)
	}

	25% {
		transform: translate(0, -30px)
	}

	50% {
		transform: translate(-30px, -30px)
	}

	75% {
		transform: translate(-30px, 0)
	}

}

@keyframes item-4_move {
	0%, 100% {
		transform: translate(0, 0)
	}

	25% {
		transform: translate(30px, 0)
	}

	50% {
		transform: translate(30px, -30px)
	}

	75% {
		transform: translate(0, -30px)
	}

}