javascript - 使い方 - ローディングアニメーション 作り方




Pace.JSでロード中にDivを表示する方法 (2)

AJAXでRESTサービスを呼び出すときはいつでも、ローダーを表示するためにPace.JSを使用しています。 ローダーが回転している間、ページはまだインタラクティブであることを除けば、Pac​​eはここで完全に機能しています。 データを読み込もうとしている間は、ページをインタラクティブにしたくありません。

これを修正するために、Pace.JS読み込みアニメーションがアクティブな間に、ページ全体(幅/高さ= 100%)をカバーする1999のZインデックスを持つdiv(モーダルをシミュレートするために高い不透明度を持つ白)を表示したいです。 Z-Index 2000では、モーダルの上に座っています)、Pace.JSの読み込みアニメーションが完了したらdivを非表示にして、データの読み込み中にユーザーが操作できる内容を制限します。

Pace.JS hubspotのホームページ( http://github.hubspot.com/pace/ )でイベント(開始、再起動、非表示)を見たことがありますが、実際にそれを使用した例はすべてありません。うまくいきませんでした。

誰かが私が探していることをする方法の例を投稿できますか? 本当に、本当に助けになるでしょう。 ありがとうございます。


これは古い投稿ですが、私はちょうどCSSでこれを修正しました

pace-running::after {
position: absolute;
background-color: #ffffff;
opacity: 0.1;
top:0;
left: 0;
right: 0;
width: 100%;
height: 100%;
content: ' ',
z-index: 9998;}

次のようにして目標を達成できます。

CSS:

div.paceDiv {
   position: absolute;
   width: 100%;
   height: 100%;
   ...
   display: none;
}

JS:

Pace.on("start", function(){
    $("div.paceDiv").show();
});

Pace.on("done", function(){
    $("div.paceDiv").hide();
});

もう手遅れでないことを願います!





modal-dialog