在等待获取数据时显示加载屏幕

Question

如何在页面加载时显示加载程序并在加载时隐藏它？

我在我的html和css中创建了一些代码，但不幸的是它似乎不像我的期望。我的意思是，当页面已经加载时，加载器仍然出现。

观点：

到目前为止，这是我的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);
  }
}

谢谢

Answer 1

当数据如下所示时，你应该隐藏loader元素 -

<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：假设你正在使用Angular。

Answer 2

使用一个标志显示在您的TS文件public dataAvailable:boolean=false;中隐藏您的HTML

而make API调用将此标志设置为true this.dataAvailable = true

当在响应中进行API响应时，将其设为false this.dataAvailable = false

并使用* ngIf条件制作HTML以显示隐藏yor html并显示yor loader，而flag为true后显示HTML