How to add dynamic content in splashscreen of ionic 3?

Question

In my ionic 3 application, i want to add dynamic content in splash screen so that i can show current version of my application in the splash screen, what should i do?

Answer 1

Splash screen is static image and you can't add there any dynamic values. Te simplest way is just add app version in footer or about page.

Answer 2

You can try that with using HTML and CSS

Navigate to the default page that loads when your app launches. In our case, this is located in: /src/pages/home.html

At the top of home.html just above paste in:

<div id="custom-overlay" [style.display]="splash ? 'flex': 'none'">
  <div class="flb">
    <div class="Aligner-item Aligner-item--top"></div>
    <img src="assets/logo.svg">
    <div class="Aligner-item Aligner-item--bottom"></div>
  </div>
</div>

The #custom-overlay div will cover the entire screen. We're using style binding set to a CSS display property. If the splash property is true, it will set it to flex, if not, it will set it to none .

The .flb class and everything inside of it is optional.

The Splash CSS: Within the home.scss file, paste in:

#custom-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  width:100%;
  background-color: #002a3e;
}

.flb {
  background-color: #3ebffb;
  height:100%;
  width:100%;
  animation: pulse 1s linear forwards;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Aligner-item {
  max-width: 50%;
}
.Aligner-item--top {
  align-self: flex-start;
}
.Aligner-item--bottom {
  align-self: flex-end;
}
#custom-overlay img {
  display: block;
  margin: 0 auto;
  width: 50%;
  height: auto;
  animation: animation 3100ms linear infinite both;
  animation-delay: 1s;
}

The key ingredient here is #custom-overlay. The associated CSS ruleset makes it cover the current page. Anything else within it is up to you and the needs of your splash page.

You can visit these links for more information on how to use this in your project: https://coursetro.com/posts/code/51/How-to-Make-an-Animated-Ionic-Splash-Page-with-HTML-&-CSS113 https://github.com/Flink91/ionic2-animated-splashscreen92