.loader {
	position: fixed;
	z-index: 9999;
	top: 0;
	right: 0;
	height: 1vh;
	width: 200vw;
	min-height: 3px;
	pointer-events: none;
	transform: translateZ(0);
	opacity: 0;
	transition: opacity .2s linear;
	background-color: rgba(0,0,0,.1);
}

body.is-loading .loader {
	opacity: 1;
}

@keyframes Slide {
	to  { transform: translate3d(95vw,0,0);}
}

@keyframes Grow {
	0%   { transform: scale3d(0,1,1);}
	10%  { transform: scale3d(.4,1,1);}
	30%  { transform: scale3d(.7,1,1);}
	50%  { transform: scale3d(.8,1,1);}
	75%  { transform: scale3d(.9,1,1);}
	100% { transform: scale3d(.95,1,1);}
}

.loader:after {
	content: "";
	position: absolute;
	inset: 0 0 0 50%;
	transform: scale3d(.5,1,1) translate3d(0,0,0);
	transform-origin: 0 0;
	background-color: var(--co-error);
	animation: none;
	animation-play-state: paused;
}

body.is-loading .loader:after {
	animation: Grow 15s linear forwards, Slide 15s 15s linear alternate infinite;
	animation-play-state: running;
}

#html .is-loading-elm {
	pointer-events: none;
	opacity: .5;
	.ico {
		display: block;
	}
}

#html input.is-loading-elm {
	~ .ico {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}