TeaWeb/loader/css/loader.scss

$setup-time: 80s / 24; /* 24 frames / sec; the initial sequence is 80 seconds */

#loader-overlay {
	position: absolute;
	overflow: hidden;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background: #1e1e1e;

	user-select: none;

	z-index: 10000;

	display: flex;
	flex-direction: column;
	justify-content: center;

	.container {
		flex-shrink: 0;

		display: block;
		position: relative;

		width: 1000px;
		height: 1000px;

		align-self: center;
		margin-bottom: 10vh;

		transition-duration: .5s;
	}

	.setup, .idle {
		position: absolute;

		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		display: none;

		&.visible {
			display: block;
		}
	}

	.setup.visible {
		animation: loader-initial-sequence 0s cubic-bezier(.81,.01,.65,1.16) $setup-time forwards;
	}

	.idle {
		img {
			position: absolute;
		}

		.steam {
			position: absolute;

			top: 282px;
			left: 380px;

			width: 249px;
			height: 125px;
			background: url("../img/loader/steam.png") 0 0;

			animation: sprite-steam 2.5s steps(50) forwards infinite;
		}
	}

	&.finishing {
		.idle {
			.steam {
				display: none;
			}

			.bowl {
				animation: swipe-out-bowl .5s both;
			}

			.text {
				animation: swipe-out-text .5s .12s both;
			}
		}

		pointer-events: none;
		animation: overlay-fade .3s .2s both;
	}

	.loader-stage {
		position: absolute;

		left: 5px;
		bottom: 5px;

		font-size: 12px;
		font-family: monospace;

		color: #999;
	}
}

@media all and (max-width: 850px) {
	#loader-overlay .container {
		transform: scale(.5);
	}
}

@media all and (max-height: 700px) {
	#loader-overlay .container {
		transform: scale(.5);
	}
}

@media all and (max-width: 400px) {
	#loader-overlay .container {
		transform: scale(.3);
	}
}

@keyframes loader-initial-sequence {
	to {
		display: none;
	}
}

@keyframes sprite-steam {
	to {
		background-position: 0 -6250px;
	}
}

@keyframes swipe-out-bowl {
	from {
		transform: translate3d(0, 0, 0);
	}

	40% {
		opacity: 1;
		transform: translate3d(-60px, 0, 0) skew(-5deg, 0) rotateY(-6deg);
	}

	to {
		opacity: 0;
		transform: translate3d(700px, 0, 0) skew(30deg, 0) rotateZ(-6deg);
	}
}

@keyframes swipe-out-text {
	from {
		transform: translate3d(0, 0, 0);
	}

	40% {
		opacity: 1;
		transform: translate3d(-30px, 20px, 0) skew(-5deg, 0);
	}

	to {
		opacity: 0;
		transform: translate3d(550px, 0, 0) skew(30deg, 0) scale(.96, 1.25) rotateZ(6deg);
	}
}

@keyframes overlay-fade {
	to {
		opacity: 0;
	}
}

/* Automated loader timeout */
#loader-overlay:not(.initialized) + #critical-load {
	display: block !important;
	opacity: 0;

	animation: loader-setup-timeout 0s ease-in $setup-time forwards;

	.error::before {
		content: 'Failed to startup loader!';
	}

	.detail::before {
		content: 'Lookup the console for more details';
	}
}


@keyframes loader-setup-timeout {
	to {
		opacity: 1;
	}
}