効果を示す：
1）[負荷]をクリックすると、シミュレーションは非同期負荷を実行します。ブラウザがブロックされています。プログレスバーが表示されます。
実装のアイデア：
1.ユーザーが[ロード]ボタンをクリックして、非同期リクエストを実行したとき。メソッドが呼び出されると、ロードバーが表示されます。
2。進行状況バーを実装する方法は？
1）document.bodyに新しいdivを追加します。ブラウザを上書きします。背景を設定します。 z-index = 999。ユーザーは、読み込み時にインターフェイス値を変更できません。
2）document.bodyに動的divを追加します。
コード実装：
main.html：
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <script src = "loading.js charset =" utf-8 "> </scrip> <link rel =" styleSheet "href =" loading.css " onclick = "showloading（）"> load </button> </body> </html>
Loading.js：
関数showloading（）{var overdiv = document.createelement（ "div"）; var loadingdiv = document.createelement（ "div"）; var childdiv1 = document.createelement（ "div"）; var childdiv2 = document.createelement（ "div"）; var childdiv3 = document.createElement（ "div"）; overdiv.classlist.add（ 'over'）; loadingdiv.classlist.add（ 'spinner'）; childdiv1.classlist.a dd（ 'bounce1'）childdiv2.classlist.add（ 'bounce2'）childdiv3.classlist.add（ 'bounce3'）loadingdiv.appendchild（childdiv1）; lo adingdiv.appendChild（childDiv2）; LoadingDiv.AppendChild（ChildDiv3）; document.body.AppendChild（OverDIV）; document.body.AppendChild（LoadingDiv）setimeout（function（）{document.body.RemoveChild（overDiv）; document.body.RemoveChild（LoadingDiv）}、5000）;}Loading.css
.spinner {width：150px; Text-align：center; left：50％; top：50％; position：aspolute：absolute; z-index：1000;}。 30px;バックグラウンドカラー：＃67CF22;ボーダーラジウス：100％;ディスプレイ：インラインブロック; -Webkit-animation：BouncedLay 1.4S Infinite Ease-In-Out; Animation：BouncedElay 1.4s Infinite Ease-In-Out;両方;}。spinner .bounce1 {-webkit-animation-delay：-0.32s; animation-delay：-0.32s;}。 {-webkit-transform：scale（0.0）} 40％{-webkit-transform：scale（1.0）}}@kounceframes bouncedelay {0％、80％、100％{transform：scale（0.0）; - webkit-transform：scale（0.0）;} 40％{scale：scale：webkit-trans 40％：（1.0）;スケール（1.0）;}}要約：
1.メソッドを掲載できます。 AJAX要求を1回再エンコールします。 Ajaxリクエストを呼び出すときに自動バーメソッドを実装します。
2. Angularの場合、AngularはHTTP呼び出しを監視する方法を提供します。 HTTP実行リクエストを監視するときは、Progress Barメソッドを呼び出すだけです。 HTTP呼び出しを実行してHTTP実行リクエストを監視するたびに、Progress Barメソッドを呼び出す必要はありません。 HTTPを実行するたびに、Progress Barメソッドを自分で呼び出す必要はありません。
上記のコンテンツは、編集者が紹介したJS非同期ロードプログレスバーに関連しています。私はそれが誰にでも役立つことを願っています！