I was playing with this idea for some time now, how to create a basic splash screen without a cordova-plugin-splashscreen plugin. It wasn’t possible until several months age when we were introduced view lifecycle events.
 
The idea is simple, show a fixed overlay container over a rest of the content. When the application initializes the first view, the splash screen is removed using afterEnter view event.
 
By all means, this is not a perfect replacement for Cordova based plugin but if you combine it with CSS media queries (make this example usable for different screen resolutions) you can do almost the same thing.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins ...
 

Basic Premise

 
What we need is a <div> container placed inside a body tag:
 
<body>
  <div id="custom-overlay"><img src="http://img3.wikia.nocookie.net/__cb20130530125633/logopedia/images/3/37/Coca-Cola-Logo.jpg"></div> 
  <!-- Here comes rest of the content -->
</body>
 
This container will cover available space using these CSS rules:
 
#custom-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}
 
This CSS trick is commonly seen in jQuery Mobile applications. As you can see, we’re using fixed div stretched from the bottom to the top and from the left to the right. This way all available space is covered, and z-index is doing a final touch placing this splash screen over everything else. At this point, z-index equal to 100 is enough, change it according to your needs.
 
Finally, we will need to use some JavaScript to hide our splash screen when the initial view is finally loaded. One warning, my example uses setTimeout to mimic app initialization process so you should remove it from your application. JavaScript looks like this:
 
nameApp.controller('ListCtrl', function($scope) {
  $scope.$on('$ionicView.afterEnter', function(){
    document.getElementById("custom-overlay").style.display = "none";      
  });  
});
 
This code is possible thanks to the view lifecycle event afterEnter, you can read more about it here. Essentially, afterEnter will trigger when the first view is loaded and visible; it’s safe to say this is a right time to remove app splash screen.
 

Embedded working example

 
Demo
 
Don’t forget that this splash screen will load long before you see this example so click on the above link and see how it works.
 
Ionic Framework Splash Screen Example
 

Code

 
This code is here only in the case the plnkr.co services are down.
 

HTML:

 
<html ng-app="starter">
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <link href="app.css" rel="stylesheet"/>  
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="app.js"></script>
</head>
 
<body>
  <div id="custom-overlay"><img src="http://img3.wikia.nocookie.net/__cb20130530125633/logopedia/images/3/37/Coca-Cola-Logo.jpg"></div> 
  <!-- The nav bar that will be updated as we navigate -->
  <ion-nav-bar class="bar-positive">

  </ion-nav-bar>
  
  <ion-nav-view></ion-nav-view>
  
  <script id="list.html" type="text/ng-template">
    <ion-view view-title="First page">  
      <ion-content class="padding">

      </ion-content>
    </ion-view>
  </script>  

</body>
 
</html>
 

JavaScript:

 
var nameApp = angular.module('starter', ['ionic', 'ui.router']);

nameApp.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
    .state('list', {
      url: '/',
      templateUrl: 'list.html',
      controller: 'ListCtrl'
    })

  $urlRouterProvider.otherwise("/");
 
});


nameApp.controller('ListCtrl', function($scope) {
  $scope.$on('$ionicView.afterEnter', function(){
    setTimeout(function(){
      document.getElementById("custom-overlay").style.display = "none";      
    }, 3000);
  });  
});
 

CSS:

 
#custom-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: #fe201f;
}

#custom-overlay img {
  display: block;
  margin: 0 auto;
  width: 50%;
  height: auto;
  -webkit-animation: rotating-function 5.25s linear infinite;
    -moz-animation: rotating-function 5.25s linear infinite;
     -ms-animation: rotating-function 5.25s linear infinite;
      -o-animation: rotating-function 5.25s linear infinite;
         animation: rotating-function 5.25s linear infinite;
}

.custom-overlay  {

}

@-webkit-keyframes rotating-function {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotating-function {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-ms-keyframes rotating-function {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-o-keyframes rotating-function {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}

@keyframes rotating-function {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • EDWIN COBOS

    Hi I want to know if this method, remove the native splash on Android and iOS devices??

    I am trying to do something like this, but to show a random image every time that app is open.

    Thanks!

    • If you don’t use native splash screen you wont have any problems with it.

      On the other hand this is a good replacement solution because you can have a full control over what is shown, even if you want to randomize it.

  • jjnimes

    The codes worked if I use ionic serve. After splash screen it proceeds to the first page. But when I ionic run android on my android phone, when the app runs, it is stuck in the splash screen and doesn’t proceed to the first page. What is the problem?

    • Unfortunately, I can’t help you without seeing your code. You should check if $ionicView.afterEnter is triggering. Also use Chrome remote debugging to check if there’s an error during application initialization.

      • jjnimes

        The code is exactly as yours 🙂 It does run well on browser but when on android it isn’t go to the first page.

        • I will never post untested code. Again, have you used Chrome/Safari remote debugging to check if there’s an error during application initialization?

  • Ændri Domi

    Will be very great to custimize the splashscreen but as this tutorial the app si showing a white screen for 1 second before rendering the splash image and background 🙁

  • Indra Lesmana

    How to remove default ionic splash screen on ios?

  • Suresh

    Hi,
    I tried the same logic,
    > In IOS, i still see the default Cordova icon and only after that i can see the event getting triggered of the custom splash implementation.
    > In Android, i cannot see any splash screen running, i also see some strange behaviour, as jjnimes mentioned below.
    I can upload the code if you wish to have a look. Let me know on how to sort this out.
    Thanks for your support in advance.
    Regards
    Suresh

  • Hey! 😉 Can U update this post to Ionic2 version?. Thanks!

  • Guilherme A. Zimmermann

    Hi @Gajotres, how are you?

    I follow your tutorial and everything works fine, but I want to display this splash screen only when the user access the login page (web version)/when he opens the app (native version).

    Now in every reload of page, in any controller, the splashscreen is called. I put this code

    $scope.$on(‘$ionicView.afterEnter’, function(){
    setTimeout(function(){
    document.getElementById(“custom-overlay”).style.display = “none”;
    }, 3000);
    });

    over all controllers, so the splash screen is showed and removed every reload, but this is not was expected.
    Can you help me?!

    Thnks advance