@polygonjs/polygonjs/src/engine/viewers/progressBars/top/progress.css

node-based WebGL 3D engine https://polygonjs.com

/* POSTER */
#polygonjs-loading-poster {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}
#polygonjs-loading-poster {
	pointer-events: none;
	background: url('${posterUrl}') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	opacity: 1;
	transition: opacity 0.8s ease-in-out;
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
}
#polygonjs-loading-poster.fade-out {
	opacity: 0;
}

/* PROGRESS BAR */
.polygonjs-progress-bar-container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 8px;
	pointer-events: none;
}
.polygonjs-progress-bar-container .polygonjs-progress-bar {
	height: 100%;
	width: 0%;
	animation-name: progress-bar-color;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
.fadeable {
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}
.visible {
	opacity: 1;
}
.hidden {
	opacity: 0;
}

@keyframes progress-bar-color {
	0% {
		background-color: rgb(115, 214, 115);
	}
	50% {
		background-color: rgb(60, 60, 211);
	}
	100% {
		background-color: rgb(115, 214, 115);
	}
}