Question

我有一部分html在点击按钮时触发数据获取，有时需要时间让数据回来，我想用加载器锁定屏幕，直到检索到数据，我该怎么办？是什么？

这是当前的代码：

 <button *ngFor="#ele of myListOfButtons" md-button (click)="bringDataToDisplay(ele.id)"> 
{{ele.name}}
  </button>

所以我想要一个加载器，只需点击bringDataToDisplay，直到数据返回（它基本上是一个api调用，使用Observables将数据带到异步）。

谢谢！

Answer 1

isLoading:boolean = false;

bringDataToDisplay(id) {
  this.isLoading = true;
  this.http.get(...).subscribe(response => {
    ... process response
    this.isLoading = false;
  });
}

<loader *ngIf="isLoading"></loader>
<div *ngIf="!isLoading">
  normal content
</div>

Answer 2

请在<html>

上方添加此 Jquery

$(window).on('load', function() { // makes sure the whole site is loaded
    $('#loader-wrapper').fadeOut(); // will first fade out the loading animation
    $('#loader').delay(500).fadeOut('slow'); // will fade out the white DIV that covers the website.
    $('body').delay(350).css({'overflow':'visible'});
})

以下内容：

<div id="loader-wrapper" class="">
    <div id="loader"></div>
</div>

CSS：

/*preloader*/
#loader-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #222;
}
#loader{
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    /*border: #3498db solid 3px;*/
    z-index: 1500;
    border-radius: 50%;
    border: transparent solid 3px;
    border-top-color: #3498db;
    animation: spin 2.5s linear infinite;
}
#loader:before{
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
    /*border: #e74c3c solid 3px;*/
    border-radius: 50%;
    border: transparent solid 3px;
    border-top-color: #ff034b;
    animation: spin 2s linear infinite;
}
#loader:after{
    content: "";
    position: absolute;
    top: 15px;
    bottom: 15px;
    right: 15px;
    left: 15px;
    /*border: #f9c922 solid 3px;*/
    border-radius: 50%;
    border: transparent solid 3px;
    border-top-color: #eee;
    animation: spin 1.5s linear infinite;
}
@keyframes spin {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

以下是另一种执行此操作的方法的链接https://codepen.io/mimoYmima/pen/fisgL

我希望它有用。

如何在我的html中添加加载器以等待数据获取

2 个答案: