/* https://codepen.io/dev_loop/pen/mgeYwo */

.container--box {
	width: 100%;
	height: 100%;
}
.container--box .boxxy {
	display: grid;
	justify-items: center;
	align-items: center;
}
.spinner {
	height: 40px;
	width: 40px;
	border-radius: 50%;
}

/* Spinner 1 */

.boxxy .spinner--1 {
	border-top: 2px solid #fff;
	animation: spinner1 600ms linear infinite;
}
@keyframes spinner1 {
	to {
		transform: rotate(360deg);
	}
}

/* Spinner 2 */

.boxxy .spinner--2 {
	border: 2px solid rgba(0, 0, 0, 0.4);
	border-top-color: #fff;
	animation: spinner2 600ms linear infinite;
}
@keyframes spinner2 {
	to {
		transform: rotate(360deg);
	}
}

/* Spinner 3 */

.boxxy .spinner--3 {
	border: 2px solid rgba(0, 0, 0, 0.4);
	border-bottom-color: #fff;
	border-top-color: #fff;
	animation: spinner3 800ms ease infinite;
}
@keyframes spinner3 {
	to {
		transform: rotate(360deg);
	}
}

/* Spinner 4 */

.boxxy .spinner--4 {
	transform: scale(0);
	background: rgba(255, 255, 255, 1);
	opacity: 1;
	animation: spinner4 800ms linear infinite;
}
@keyframes spinner4 {
	to {
		transform: scale(1.5);
		opacity: 0;
	}
}

/* Spinner 5 */

.boxxy .spinner--5 {
	border: 2px solid rgba(255, 255, 255, 1);
	animation: spinner5 800ms linear infinite;
}
@keyframes spinner5 {
	0% {
		border-radius: 50%;
		transform: rotate(0);
	}
	50% {
		transform: rotate(180deg);
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}
	100% {
		border-radius: 50%;
		transform: rotate(360deg);
	}
}

/* Spinner 6 */

.boxxy .spinner--6 {
	border-top: 2px solid #fff;
	border-right: 2px solid transparent;
	animation: spinner6 700ms linear infinite;
}
@keyframes spinner6 {
	to {
		transform: rotate(360deg);
	}
}