nuno · February 18, 2017 11:16
diff --git a/Ionic2 Preloader Example index.html b/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>