Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 230092

Splashscreen for Ionic website

$
0
0

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:


Viewing all articles
Browse latest Browse all 230092

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>