title: how to show a spinner till the time data recieved from the server in angular2
body: <p>The project have a service.ts to make ajax call(http.post) and several components(abc.component.ts, bcd.component.ts etc) gets the data from the server through service.ts</p>
  
  <p>I am using <code>&lt;div class="spinner"&gt;&lt;/div&gt;</code>  for the spinner view. But, need a better approach to show loader either gif etc.</p>
  
  <p>I want to show a spinner till the time each component fetch data from the server. How to do that? </p>
  
  <h2>service.ts</h2>
  
  <pre><code> getdata(){
        let headers = new Headers({ 'Content-Type': 'application/json' });
          let options = new RequestOptions({ headers: headers });
          let url = "http://883.82./Ser/soSe"; 
          return this.http.post(url, clientJson).map((res: Response) =&gt; res.json());
      }
  </code></pre>
  
  <h2>abc.component.ts</h2>
  
  <pre><code>let clientJson = {
          "aoId": "M_AO_918",
          "viewBys": ["usstate"],
          /* ... */
      };
    this.DataService.getdata(clientJson).subscribe(
          success =&gt; this.abcChart(success),
          error =&gt; this.errorMessage = error
      );
  abcChart(jsonData) {
      /* ... */
  }
  </code></pre>
  
  <h2>bcd-chart.component.ts</h2>
  
  <pre><code> initData() {
          let clientJson = {
              "aoId": "M_AO_918",
              "viewBys": ["brands"], 
              /* ... */ 
          };
          this.DataService.getdata(clientJson).subscribe(
              success =&gt; this.bcdChart(success),
              error =&gt; this.errorMessage = error
          );
      }
      bcdChart(jsonData) {
          /* ... */
      }
  </code></pre>
  
  <h2>styles.css</h2>
  
  <pre><code>.spinner {
    width: 40px;
    height: 40px;
    background-color: #333;
  
    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
  }
  
  @-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
  }
  
  @keyframes sk-rotateplane {
    0% { 
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    } 50% { 
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    } 100% { 
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }
  .loading{
    background-color: #d35400;
  }
  </code></pre>