GIF File in splash screen Ionic


I am developing a hybrid application with ionic-framework and Cordova plugins. They asked me the splash screen on both operating systems (iOS and Android) has a small animation. I imagine a GIF but not if you can load a GIF as splash screen. Or if there is a plugin for this.


You can do it this way without using plugins. More information is available here.


       <div id"custom-overlay"><img src""></div> 
      <!-- Here comes rest of the content -->


#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: 60%;
  height: auto;


 .run(function($ionicPlatform, $state, $cordovaSplashscreen) {
      $ionicPlatform.ready(function() {
      if(navigator.splashscreen) {

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

Answered By – Tomislav Stankovic

Leave a Comment