

.wrap {
/*
	width: fit-content;

	border-radius: 10px;

	padding: 10px;

	position: absolute;

	top: 52%;

	left: 50%;

	transform: translate(-50%,-50%);
*/
	transition: 0.3s;



}

.loaders svg {

}

svg {

	display: inline-block;

	transition: 0.3s;

	border-radius: 5px;

}

.go path {

	animation-name: ro;

	animation-duration: 1s;

	animation-timing-function: linear;

	animation-iteration-count: infinite;

	transform-origin: 50% 50%;

}



@keyframes ro {

	100% {

		transform: rotate(360deg) translate(0,0);

	}

}



@keyframes ro-5 {

	100% {

		stroke-dasharray: 200;

		stroke-dashoffset: 0;

	}

}





.loader-4 {

	filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.2));

}

.loader-4 .load-4-1, .loader-4 .load-4-2, .loader-4 .load-4-3 {

	transform-origin: 50% 50%;

	animation-iteration-count: infinite;

	

}

.loader-4 .load-4-1 path, .loader-4 .load-4-2 path, .loader-4 .load-4-3 path {

	box-shadow: 2px 2px 0 #fff inset;

}

.loader-4 .load-4-1 {

	animation-name: ro-4-1;

	animation-duration: 1s;

}

.loader-4 .load-4-2 {

	animation-name: ro-4-2;

	animation-duration: 1s;

	animation-delay: 0.5s;

}

.loader-4 .load-4-3 {

	animation-name: ro-4-3;

	animation-duration: 1s;

	animation-delay: 1s;

}



@keyframes ro-4-1 {

	100% {

		transform: rotate(360deg) translate(0,0);

	}

}

@keyframes ro-4-2 {

	100% {

		transform: rotate(360deg) translate(0,0);

	}

}

@keyframes ro-4-3 {

	100% {

		transform: rotate(360deg) translate(0,0);

	}

}
