Splashscreen for Ionic website

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.

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

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:

1 Like

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