badpenguin/Ionic2 Preloader Example index.html

## Ionic2 Preloader Example index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="UTF-8">
	<title>Ionic App</title>
	<meta name="viewport"
	      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="msapplication-tap-highlight" content="no">

	<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
	<link rel="manifest" href="manifest.json">
	<meta name="theme-color" content="#4e8ef7">

	<!-- cordova.js required for cordova apps -->
	<script src="cordova.js"></script>

	<!-- un-comment this code to enable service worker
	<script>
	  if ('serviceWorker' in navigator) {
		navigator.serviceWorker.register('service-worker.js')
		  .then(() => console.log('service worker installed'))
		  .catch(err => console.log('Error', err));
	  }
	</script>-->
	<link href="build/main.css" rel="stylesheet">
	<!--<script src="assets/lib/web-animations.min.js"></script>-->

	<style>

		#preloader {
			/* OLD STYLE using wrapper:
			display: table;
			width: 100%;
			height: 100%;
			text-align: center;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			*/

			/* Modern */
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			text-align: center;

			font-family: "Roboto", -apple-system, "Helvetica Neue", sans-serif;
			font-size: 1.2rem;
			font-color: #4a4a4a;
		}


		@-webkit-keyframes preloadFadeIn { from { opacity: 0; } to { opacity: 1; } }
		@-moz-keyframes preloadFadeIn { from { opacity: 0; } to { opacity: 1; } }
		@keyframes preloadFadeIn { from { opacity: 0; } to { opacity: 1; } }

		.preload-fade-in {
			opacity: 0;
			-webkit-animation: preloadFadeIn ease-in 1;
			-moz-animation: preloadFadeIn ease-in 1;
			animation: preloadFadeIn ease-in 1;

			-webkit-animation-fill-mode: forwards;
			-moz-animation-fill-mode: forwards;
			animation-fill-mode: forwards;

			-webkit-animation-duration: 1s;
			-moz-animation-duration: 1s;
			animation-duration: 1s;
		}

		#preloader #logo {
			-webkit-animation-delay: 1s;
			-moz-animation-delay: 1s;
			animation-delay: 1s;
		}

		#preloader #title {
			margin-top: 20px;

			-webkit-animation-delay: 2s;
			-moz-animation-delay: 2s;
			animation-delay: 2s;
		}

		#preloader #payoff {
			margin-top: 30px;
			text-transform: uppercase;
			font-size: 1.4rem;

			-webkit-animation-delay: 3s;
			-moz-animation-delay: 3s;
			animation-delay: 3s;
		}

		/* Cut and paste spinner */
		@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } }
		@-moz-keyframes sk-bouncedelay  { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } }
		@keyframes sk-bouncedelay  { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } }

		.spinner {
			margin: 100px auto 0;
			width: 70px;
			text-align: center;
		}

		.spinner > div {
			width: 12px; /* 18px */
			height: 12px; /* 18px */
			background-color: #333;

			border-radius: 100%;
			display: inline-block;
			-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
			-moz-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
			animation: sk-bouncedelay 1.4s infinite ease-in-out both;
		}

		.spinner .bounce1 {
			-webkit-animation-delay: -0.32s;
			-moz-animation-delay: -0.32s;
			animation-delay: -0.32s;
		}

		.spinner .bounce2 {
			-webkit-animation-delay: -0.16s;
			-moz-animation-delay: -0.16s;
			animation-delay: -0.16s;
		}


	</style>
</head>
<body>

<!-- Ionic's root component and where the app will load -->
<ion-app>
	<div id="preloader">
		<div class="wrapper">

			<div class="preload-fade-in" id="logo"><img height="100" src="assets/svg/orso-big.svg"></div>
			<div class="preload-fade-in" id="title"><img width="220" src="assets/svg/scritta-big.svg"></div>
			<div class="preload-fade-in" id="payoff">Compra nei migliori store</div>

			<div class="spinner">
				<div class="bounce1"></div>
				<div class="bounce2"></div>
				<div class="bounce3"></div>
			</div>
		</div>
	</div>
</ion-app>

<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>

<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="UTF-8">
	<title>Ionic App</title>
	<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="msapplication-tap-highlight" content="no">

	<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
	<link rel="manifest" href="manifest.json">
	<meta name="theme-color" content="#4e8ef7">

	<!-- cordova.js required for cordova apps -->
	<script src="cordova.js"></script>

	<!-- un-comment this code to enable service worker
	<script>
	if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('service-worker.js')
	.then(() => console.log('service worker installed'))
	.catch(err => console.log('Error', err));
	}
	</script>-->
	<link href="build/main.css" rel="stylesheet">
	<!--<script src="assets/lib/web-animations.min.js"></script>-->

	<style>

	#preloader {
	/* OLD STYLE using wrapper:
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	*/

	/* Modern */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;

	font-family: "Roboto", -apple-system, "Helvetica Neue", sans-serif;
	font-size: 1.2rem;
	font-color: #4a4a4a;
	}


	@-webkit-keyframes preloadFadeIn { from { opacity: 0; } to { opacity: 1; } }
	@-moz-keyframes preloadFadeIn { from { opacity: 0; } to { opacity: 1; } }
	@keyframes preloadFadeIn { from { opacity: 0; } to { opacity: 1; } }

	.preload-fade-in {
	opacity: 0;
	-webkit-animation: preloadFadeIn ease-in 1;
	-moz-animation: preloadFadeIn ease-in 1;
	animation: preloadFadeIn ease-in 1;

	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;

	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	animation-duration: 1s;
	}

	#preloader #logo {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
	}

	#preloader #title {
	margin-top: 20px;

	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	animation-delay: 2s;
	}

	#preloader #payoff {
	margin-top: 30px;
	text-transform: uppercase;
	font-size: 1.4rem;

	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	animation-delay: 3s;
	}

	/* Cut and paste spinner */
	@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } }
	@-moz-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } }
	@keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } }

	.spinner {
	margin: 100px auto 0;
	width: 70px;
	text-align: center;
	}

	.spinner > div {
	width: 12px; /* 18px */
	height: 12px; /* 18px */
	background-color: #333;

	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	-moz-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	}

	.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	-moz-animation-delay: -0.32s;
	animation-delay: -0.32s;
	}

	.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	-moz-animation-delay: -0.16s;
	animation-delay: -0.16s;
	}


	</style>
	</head>
	<body>

	<!-- Ionic's root component and where the app will load -->
	<ion-app>
	<div id="preloader">
	<div class="wrapper">

	<div class="preload-fade-in" id="logo"><img height="100" src="assets/svg/orso-big.svg"></div>
	<div class="preload-fade-in" id="title"><img width="220" src="assets/svg/scritta-big.svg"></div>
	<div class="preload-fade-in" id="payoff">Compra nei migliori store</div>

	<div class="spinner">
	<div class="bounce1"></div>
	<div class="bounce2"></div>
	<div class="bounce3"></div>
	</div>
	</div>
	</div>
	</ion-app>

	<!-- The polyfills js is generated during the build process -->
	<script src="build/polyfills.js"></script>

	<!-- The bundle js is generated during the build process -->
	<script src="build/main.js"></script>

	</body>
	</html>