Ionic 3 Splash Screen Animation

Generate Splash Screen and App Icon with the CLI

1.Override the default graphics below with your custom images.

• /resources/icon.png - at least 1024x1024px
• /resources/splash.png - at least 2732×2732px

icon.png splash.png

2.Make sure you have a native mobile platform added to the project.

ionic cordova platform add ios
ionic cordova platform add android

3.Now generate image resources for your app by running the following command from the terminal.

ionic cordova resources

Animated Splash Screen

You can implement a nice looking animation with minimal effort by using an pre-built open source loader.

• SpinKit - Pure CSS Loaders
• SVG-Loaders
• Loading.io - Animated SVG Loaders

Update the Default Splash Screen Config

Our strategy is to show a static image splash first, then seamlessly blend in the animation. The CSS background will closely match the image background color, but we will hide the image as soon as possible when the platform becomes ready.

Update the config.xml file with the following lines.

<!-- omitted -->
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="ShowSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />

Hide and Show the Animation

In the app.html, we just need a div that will act as an overlay for several seconds after the platform is ready.

<div *ngIf="showSplash" class="splash">
  <div class="spinner"></div>
</div>
<ion-nav [root]="rootPage"></ion-nav>

In the app.component.ts, we import an RxJS timer that will toggle the visibility of the overlay after 3000ms.

import { timer } from 'rxjs/observable/timer';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;
  showSplash = true; // show animation

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      timer(3000).subscribe(() => this.showSplash = false) // hide animation after 3s
    });
  }
}

Animation Styles

The animation style is just an overlay that will expand to 100% width and height of the viewport. I am also using flexbox to center the content directly in the middle of the screen in a way that is responsive across devices. Add the styles in app.scss.

.splash {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff7400;
}

// your animation code (SpinKit used in this demo)
.spinner {
    width: 40px;
    height: 40px;
    background-color: #fff;
  
    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
  }
  
  @-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
  }
  
  @keyframes sk-rotateplane {
    0% { 
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    } 50% { 
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    } 100% { 
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }

You can grab the spinner CSS from the open-source SpinKit project.