ボタンをクリックしたときにデータを取得するhtmlの部分があります。データが戻ってくるまでに時間がかかる場合があります。データが取得されるまでローダーで、どうすればいいですか？htmlでローダーを追加してデータを取得する方法
これは現在のコードです：
<button *ngFor="#ele of myListOfButtons" md-button (click)="bringDataToDisplay(ele.id)">
{{ele.name}}
</button>
クリックがbringDataToDisplay上がある場合、データが戻って非同期にデータを持って来るために（その基本的にAPI呼び出しになるまで、だから私は使用して、ローダーをしたいですオブザーバブル）。
ありがとうございます！
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>
<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'});
})
そして、それは側に次の上のjQueryこのを追加してください：
<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
を行うための別の方法へのリンクです。
本当にうまくいくのですが、実際のローダーを追加して画面をブロックすると、誰もその読み込み中に何かをクリックすることはできません。 –
div位置を絶対値0,0、サイズ100vh、100vw、透明、z-インデックス1000を追加する –