CODEWITHSUNDEEP
htmlcssangularpageload
baimWonk
baimWonk

Reputation: 841

Display loading screen while waiting fetch data

How do I display a loader when the page loads and hide it when it is loaded ?

I've created some code inside my html and css, but unfortunately it seems not like as my expectation. I mean, when the page already loaded, the loader still appear.

view: enter image description here

So far, here it is my dashboard.component.html

<style type="text/css">
  .text-xxl {
    font-size: 90px;
  }
</style>
<div class="row">
<div eds-tile class="xl-4">
  <eds-tile-title>User on Shift</eds-tile-title>
  <div class="loading large"></div>
<table class="table">
  <thead>
     <tr>
        <th *ngFor="let col of tablePresetColumns">
           {{col.content}}
        </th>
        <th></th>
        <th></th>
     </tr>
  </thead>
  <tbody>
     <tr *ngFor="let row of tablePresetData ">
        <td> {{row[0].content}}</td>
        <td *ngFor="let cell of row"> 
           <span class ="dot" [ngClass]="{
              'dot-yellow' : cell.content == 'Busy',
              'dot-green' : cell.content == 'Idle',
              'dot-red' : cell.content == 'Overload'}">
           </span>
        </td>
     </tr>
  </tbody>
 </table>
 </div>
<div class="xl-8">
<div class="row">
  <div eds-tile class="xl-6" style="height: 200px">
     <eds-tile-title>Number of User on Shift</eds-tile-title>
     <div class="kpi">
        <div class="loading large"></div>
        <div class="item" *ngFor="let item of apiData">
           <span class="text-xxl">{{item.total}}</span>
           <span class="text-lg color-gray"> Persons</span>
        </div>
     </div>
  </div>
  <div class="row">
     <div eds-tile class="xl-7" style="height: 500px">
        <eds-tile-title>User on Shift Indicator</eds-tile-title>
        <div class="loading large"></div>
        <div id="container" style="height: 100%"></div>
     </div>
  </div>
 </div>
</div>

dashboard.component.css

.loading {
  height: 32px;
  width: 32px;
  font-size: 32px;
  position: relative;
}
.loading::after {
  content: "\e930";
  font-family: "Ericsson Icons" !important;
  animation: rotateAnimation 2s infinite ease-in-out;
  position: absolute;
}
.loading.small {
  font-size: 16px;
  height: 16px;
  width: 16px;
}
.loading.large {
  font-size: 64px;
  height: 66px;
  width: 64px;
}
.loading.btn {
  font-size: 16px;
  height: 30px;
  width: 100px;
}
.loading.btn::after {
  left: calc(50% - 8px);
  top: calc(50% - 8px);
}
@keyframes rotateAnimation {
  0% {
   transform: rotate(0);
  }
  25% {
   transform: rotate(300deg);
  }
  100% {
   transform: rotate(0);
  }
}

Thanks

Upvotes: 0

Views: 2158

Answers (2)

Er Abdul Meman
Er Abdul Meman

Reputation: 173

Use one flag to show hide your HTML like this in your TS file public dataAvailable:boolean=false;

while make API call put this flag to true this.dataAvailable = true

and when API response is done in side response came make it false this.dataAvailable = false

and make your HTML with *ngIf condition to show hide yor html and display yor loader while flag is true after that show your HTML

Upvotes: 2

Pardeep Jain
Pardeep Jain

Reputation: 86740

You should hide the loader element when data is fecthed like below -

<eds-tile-title>Number of User on Shift</eds-tile-title>
 <div class="kpi">
    <div *ngIf='!apiData' class="loading large"></div>
    <div class="item" *ngFor="let item of apiData">
       <span class="text-xxl">{{item.total}}</span>
       <span class="text-lg color-gray"> Persons</span>
    </div>
 </div>

<div eds-tile class="xl-7" style="height: 500px">
    <eds-tile-title>User on Shift Indicator</eds-tile-title>
    <div *ngIf='!apiData' class="loading large"></div>
    <div id="container" style="height: 100%"></div>
 </div>

PS: Assuming you are using Angular.

Upvotes: 1

Related Questions