I have developed an angular2 application using typescript that relies on SystemJS. My starting point was this seed app I found.
When viewed on a desktop, you can observe the loading text enclosed within tags (e.g. Loading...).
On the index page of my app, there is a small loading div designed to display while the app loads for the first time.
Interestingly, this loading div never appears on mobile devices.
Index Code
<app>
<header>
<nav>
<div class="container col-sm-10 col-sm-offset-1">
<div class="navbar-header">
<a class="navbar-brand col-xs-3 col-xs-offset-1">
<img src="./assets/logo.png" />
</a>
</div>
</div>
</nav>
</header>
<div class="bounceInDown animated">
<div class="loading-wrapper animated fadeIn">
<p class="loading-text">Hold on!<br />We're unpacking...</p>
<div class="loading-icon preload"></div>
</div>
</div>
</app>
If more code examples are needed, feel free to request them.
The main goal is to ensure that this loading div inside the app tags shows up on mobile devices as well. Any tips involving jQuery mobile are welcome too.
It seems like the issue might be related to the keyframe. Could you please help me identify what's causing the problem?
CSS and keyframe Code
.loading-icon {
animation: scaleout 1.0s infinite ease-in-out;
background-color: #ffffff;
border-radius: 100%;
display: inline-block;
height: 40px;
margin: 100px auto;
-webkit-animation: scaleout 1.0s infinite ease-in-out;
width: 40px;
}
}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}