Splashscreen for Ionic website

Ionic Framework ionic-v3
1

Hello,

I am using ionic to deploy a website and an app using the same base code. Is there a way to have a splashscreen working on the website version ?
During the module loading my page stay blank where I would like to display something like “Loading modules” so the website doesn’t look broken for the first few seconds.

Thanks.

2

You might want to look into modifying your index.html to do this.

3

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:

4

Thanks for the solution. I need to put it just before < ion-app > and it works well.