如何在我的html中添加加載程序以等待數據提取

我有一部分html觸發數據提取，當點擊一個按鈕時，有時需要時間才能返回數據，我想鎖定屏幕加載器直到數據被檢索，我該怎麼做？如何在我的html中添加加載程序以等待數據提取

這是當前的代碼：

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

所以我希望有一個程序的時候，有上bringDataToDisplay一個點擊，直到數據又回來了（它基本上是一個API調用來實現數據所以它的異步，使用觀測）。

謝謝!!

來源

2016-11-06 jack miao

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>

來源

2016-11-06 10:24:41

很好用，接受如何添加一個阻塞屏幕的實際加載器，以便在加載時沒有人點擊任何東西？ –

加絕對位置絕對0,0，大小100vh，100vw，透明，z-index 1000 –

請添加此的Jquery的<html>

$(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

我希望這是有用的另一種方式的鏈接。

來源

2016-11-06 10:33:15

如何在我的html中添加加載程序以等待數據提取

回答

相關問題