Show loading spinner for some time

Ionic Framework ionic-v3
1

Basically, what I want to do is show a loading spinner for 2-3 seconds after logging in to my app, to simulate some loading time as it communicates with my API to get data.

How do I go about in doing this?

2

Try to start reading the docs would be the best place to start.

Your answer:

Main docs:

3

Just use setTimeout with the call to dismiss the spinner.

4

I already read the docs. What I’m asking is that is there any function that I can set the spinner to load for a certain time then fade out.

5

Hmmm that could be it. I’ll try it and see if it works

6

As the docs mention (here) there’s also the duration property that you can set.

7

as @SigmundFroyd also mentioned. If you’d just copied the example in de docs and read it, then you’d have seen that there is a duration property.

8

Here is a little “hack” you can do:

  • go to your index.html
  • place css animated loader of your choice between your tags
    For example:
<ion-app>
      <div class="lds-ripple">
        <div></div>
        <div></div>
      </div>
      <style type="text/css">
        .lds-ripple {
            position: absolute;
            position: absolute;
            top: 50%;
            margin-top: -100px;
            left: 50%;
            margin-left:-100px;
        }
        @keyframes lds-ripple {
          0% {
            top: 96px;
            left: 96px;
            width: 0;
            height: 0;
            opacity: 1;
          }
          100% {
            top: 18px;
            left: 18px;
            width: 156px;
            height: 156px;
            opacity: 0;
          }
        }
        @-webkit-keyframes lds-ripple {
          0% {
            top: 96px;
            left: 96px;
            width: 0;
            height: 0;
            opacity: 1;
          }
          100% {
            top: 18px;
            left: 18px;
            width: 156px;
            height: 156px;
            opacity: 0;
          }
        }
        .lds-ripple div {
          box-sizing: content-box;
          position: absolute;
          border-width: 4px;
          border-style: solid;
          opacity: 1;
          border-radius: 50%;
          -webkit-animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
          animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        }
        .lds-ripple div:nth-child(1) {
          border-color: #488aff;
        }
        .lds-ripple div:nth-child(2) {
          border-color: #32db64;
          -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
        }
      </style>
  </ion-app>

Code between your ion-app tags will get replaced once your app is ready, so user will see your loading animation until things are ready.

9

I’m a bit confused. Isn’t index.html for the main app and shouldn’t be changed that easily? Can you provide a demo for this?

10

Well normally you should not play with index.html unless you know what you are doing;) hence i called it a hack. I use it in prod app.
As for the demo:

  1. ionic start myApp blank
  2. go straight to index.html in SRC
  3. add the code I shared within the tag
11

Oh I see. Well I’ll try it and see if it works out :+1:

12

well it works but only when the app starts up. I wanted to display the loading animation while my app is communication with my API and is loading up the data to display.

13

Sorry I misunderstood your case then. In this scenario its even easier. All you need to do is to use ‘loading’ component: https://ionicframework.com/docs/components/#loading

Basically in the call to API start it and after you receive response - call dismiss()

15

nvm I got it. called it after it’s done getting the data and mapping it out. thanks!