webpack-bootstrap-ui-kit/src/html/_components/LoadingSpinner.html

<style>
	@keyframes lds-ellipsis1 {
		0% {
			transform: scale(0);
		}
		100% {
			transform: scale(1);
		}
	}
	@keyframes lds-ellipsis3 {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(0);
		}
	}
	@keyframes lds-ellipsis2 {
		0% {
			transform: translate(0, 0);
		}
		100% {
			transform: translate(19px, 0);
		}
	}
	body,
	html {
		font-size: 14px;
		margin: 0;
		padding: 0;
		background: #fff;
		color: #333;
		overflow-x: hidden;
	}
	#PageLoading {
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		width: 100% !important;
		height: 100% !important;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: center;
		justify-content: center;
		z-index: 2000;
		will-change: opacity;
		background: #212529;
		color: #212529;
	}
	#PageLoading .logo {
		filter: invert(1);
		margin-left: 20px;
	}
	.main-bn {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99999999;
		padding: 0.5rem 1rem;
		text-align: center;
		color: #fff;
		background: #ff0000;
	}
	img,
	iframe {
		max-width: 100%;
	}
	.loading-spinner {
		text-align: center;
	}
	.lds-ellipsis {
		display: inline-block;
		position: relative;
		width: 64px;
		height: 64px;
		color: #fff;
	}
	.lds-ellipsis div {
		position: absolute;
		top: 27px;
		width: 11px;
		height: 11px;
		border-radius: 50%;
		background: #888;
		animation-timing-function: cubic-bezier(0, 1, 1, 0);
	}
	.lds-ellipsis div:nth-child(1) {
		left: 6px;
		animation: lds-ellipsis1 0.6s infinite;
	}
	.lds-ellipsis div:nth-child(2) {
		left: 6px;
		animation: lds-ellipsis2 0.6s infinite;
	}
	.lds-ellipsis div:nth-child(3) {
		left: 26px;
		animation: lds-ellipsis2 0.6s infinite;
	}
	.lds-ellipsis div:nth-child(4) {
		left: 45px;
		animation: lds-ellipsis3 0.6s infinite;
	}
	@keyframes lds-text {
		from {
			font-size: 1em;
		}
		to {
			font-size: 1.5em;
		}
	}
	.lds-text {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -5rem;
		margin-top: 8rem;
		font-size: 0.8rem;
		letter-spacing: 0.25em;
		color: #fff;
	}
	.lds-text b {
		font-weight: 300;
		animation: lds-text 5s ease infinite alternate;
	}
	.lds-text b:nth-child(1) {
		animation-delay: 0.5s;
	}
	.lds-text b:nth-child(2) {
		animation-delay: 1s;
	}
	.lds-text b:nth-child(3) {
		animation-delay: 1.5s;
	}
	.lds-text b:nth-child(4) {
		animation-delay: 2s;
	}
	.lds-text b:nth-child(5) {
		animation-delay: 2.5s;
	}
	.lds-text b:nth-child(6) {
		animation-delay: 3s;
	}
	.lds-text b:nth-child(7) {
		animation-delay: 3.5s;
	}
	.lds-text b:nth-child(8) {
		animation-delay: 4s;
	}
	.lds-text b:nth-child(9) {
		animation-delay: 4.5s;
	}
	.lds-text b:nth-child(10) {
		animation-delay: 5s;
	}
</style>

<div id="PageLoading">
	<div class="loading-spinner">
		<img
			class="logo"
			src="../../img/logo.svg"
			width="200"
			alt="UI Kit"
		/><br />
		<div class="lds-ellipsis">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<br />
		<div class="lds-placeholder">LOADING...</div>
		<div class="lds-text">
			<b>L</b>
			<b>O</b>
			<b>A</b>
			<b>D</b>
			<b>I</b>
			<b>N</b>
			<b>G</b>
			<b>.</b>
			<b>.</b>
			<b>.</b>
		</div>
	</div>
</div>