As @Sujan12 said, you can put your custom loading content inside <ion-app></ion-app>
in index.html
.
For example:
<ion-app>
<style>
.loading {
width: 80px;
height: 80px;
margin: 200px auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0)
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
<div class="loading"></div>
</ion-app>
Or for an example of an animated svg, see: