JS Progress Loading Animationプログラムは私の個人的な仕事です。よく書かれていない場合は、参照できますが、私の許可なしに、他の目的に使用しないでください！
朝にホームページの進行状況を読み込みました。ブログで使用したかったのです。ブログパークが速すぎて、アニメーション効果がまったく表示されないことがわかりました。 「完全」をロードしました。それを忘れて、ブログをあまりにも肥大化しないでください！
そこで、デモページを書き、ボディにiframeを追加して、より大きなWebサイトを読み込んで、効果を見ることができます！
Safariを使用してCSSアニメーションを開く再生時間が同期されています。理由はわかりませんが、ローカルテストは問題ありません（アドバイスをください！）、ChromeとFirefoxに問題はありませんが、IEをテストしていません
ロード時間統計Windowsオブジェクトのパフォーマンスプロパティを使用しました。これは、正確な時間を計算するために特別に使用される方法です。これは、MDNのパフォーマンスプロパティの説明です。
この例の実装原則は比較的単純ですが、ファイルのサイズに応じて読み込みの進行状況を実際には表示しません。 document.readystateのステータスに応じてディスプレイの進行状況を変更します。実際、XMLHTTPREQUESTオブジェクトのインスタンスの進行状況イベントを使用して、次のような詳細を詳細に解釈する別のより信頼できる方法があります。
var request = new xmlhttprequest（）; request.onprogress = function（e）{if（e.lengthcomputable）{// lenghtcomputableは、ファイルにサイズがあるかどうかを指します、値はtrue、false reswork.innerhtml = math.round（100* e.loaded/e.total） +/'％/'; //ロードされて、合計はロードされたサイズと合計サイズを表します}}上記の方法で実装するのは非常に厄介であり、100％の実際の負荷の進捗を達成することはできないので、私はちょっとした偽物のふりをして、彼を必要としません！
この例では、document.stylesheets [0] .insertrule（）メソッドも使用します。これが私の要約です：ネイティブJSを使用したCSSスタイルを読み書きする方法の要約
CSSアニメーションの実装については、コードを自分でお読みください。非常に単純なコードです。読むのが難しい場合は、CSSの基本を補うことをお勧めします。いくつかの実用的な情報を紹介します。 CSS中国の参照マニュアルのウェブサイト。私は表現スキルが限られているので、ここで噛むことはありません。
完全なコード +デモンストレーションは次のとおりです。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> sufu's works </title> <scrip> document.onededstatechange = function（）{function $ id（id）{return document.getelementbyid（id）} $ id（ 'preloader_line'）。firstlementchild、preloader = $ id（ 'preloader'）、preloader_center = $ id（ 'preloader_center'）、preloader_btn = $（ 'prelader_btn'）、preloader_loading = $ id（ 'preoader_loading'）; if（document.readystate == "Interactive"）{loading（1,110,50）; } if（document.readystate == "complete"）{loading（5,120,16.7）; preloader_loading.id = 'preloader_loaded'; preloader_loading.innerhtml = 'complete complete'+'<br/>'+'の読み込み：'+performance.now（）。tofixed（3）+'ms'; preloader_btn.innerhtml = 'ente r'; preloader_btn.style.borderbottom = '4px Solid Green'; preloader_btn.style.fontstyle = 'enternit'; preloader_btn.style.fontsize = '24px'; if（document.stylesheets [0] .insertrule）{document.stylesheets [0] .insertrule（ '＃preloader_btn：hover {border-bottom：4px solid green; border-radius：60px; color：red;}'、0）; } else {// document.stylesheets [0] .addrule（ '＃preloader_btn：hover {border-bottom：4px solid green; border-radius：60px; color：red;}'、0）; } preloader_btn.onclick = function（）{var opacity = 1、id; function hide（）{if（ofacity <= 0）{cleartimeout（id）; preloader.style.display = 'none'; document.body.style.overflow = 'auto';戻る; }不透明 - = 0.1; preloader.style.opacity = ofacity; id = setimeout（function（）{hide（）;}、50）; } 隠れる（）; }; } function roading（step、max、time）{if（width> = max）{cleartimeout（id）; if（max> = 120）{preloader_line.parentnode.style.display = 'none'; } 戻る; } width += step; preloader_line.style.width = width+'px'; id = setimeout（function（）{loading（step、max、time）;}、time）; }}}; </script> <style> body {overflow：hidden; } #preloader {position：absolute;幅：100％;高さ：100％;背景色：白。 Z-Index：999; } #preloader_center {position：absolute;左：0;右：0;上：0;幅：150px;高さ：75px;マージン：自動; } #preloader_loading {position：absolute;左：0;右：0;トップ：45px;マージン：自動;幅：96px;高さ：30px; } #preloader_loaded {position：absolute;左：0;右：0;トップ：45px;マージン：自動;フォントサイズ：12px;テキストアライグ：センター; Line-Height：30px; } #preloader_loadingスパン{position：absolute;幅：10px;高さ：2px;上：0;下：0;マージン：自動;背景色：＃9b59b6;アニメーション：1.5Sの無限の容易さをロードします。 } #preloader_loadingスパン：nth-child（2）{左：12px; Animation-Delay：.1s; } #preloader_loadingスパン：nth-child（3）{左：24px; Animation-Delay：.2s; } #preloader_loadingスパン：nth-child（4）{左：36px; Animation-Delay：.3s; } #preloader_loadingスパン：nth-child（5）{左：48px; Animation-Delay：.4s; } #preloader_loadingスパン：nth-child（5）{左：48px; Animation-Delay：.4s; } #preloader_loadingスパン：nth-child（5）{左：48px; Animation-Delay：.4s; } #preloader_loadingスパン：nth-child（5）{左：48px; Animation-Delay：.4s; } #preloader_loadingスパン：nth-child（4）{左：36px; Animation-Delay：.3s; } #preloader_loadingスパン：nth-child（5）{左：48px; Animation-Delay：.4s; } #preloader_loadingスパン：nth-child（5）{左：48px; Animation-Delay：.4s; } #preloader_loadingスパン：nth-child（5）{左：48px; Animation-Delay：.4s; } #preloader_loadingスパン：nth-child（4）{左：36px; Animation-Delay：.3s; } #preloader_loadingスパン：nth-child（5）{左：48px; Animation-Delay：.4s; } #preloader_loadスパン：nth-child（6）{左：50px; Animation-Delay：.5s; } #preloader_loadingスパン：nth-child（7）{左：62px; Animation-Delay：.6s; } #preloader_loadingスパン：nth-child（8）{左：74px; Animation-Delay：.7s; } #preloader_loadingスパン：nth-child（9）{左：86px; Animation-Delay：.8s; } @KeyFrames Loading {0％{height：2px; background：＃9b59b6;} 15％{height：20px; background：＃3498db;} 50％{height：2px; background：＃9b59b6;} 100％{height：2px; 1000px;} #preloader_btn {position：absolute;左：0;右：0;上：0;マージン：自動;表示：ブロック;幅：122px;高さ：40px;フォントサイズ：14px;テキストアライグ：センター; Line-Height：40px;カーソル：ポインター;色：＃9b59b6;フォントスタイル：イタリック; -webkit-transition：すべて.5; -moz-transition：すべて.5S; -ms-transition：すべて.5秒; -o-Transition：すべて.5S;遷移：すべて.5; } #preloader_line {position：absolute;左：0;右：0;トップ：40px;マージン：自動;幅：120px;高さ：2px;ボーダー：1pxソリッドグリーン。 } #preloader_line span {display：block;高さ：2px;幅：0;背景色：緑; } </style> </head> <body> <div id = "preoader"> <div id = "preloader_center"> <span id = "preloader_btn"> loading ... </span> <span> <preoader_line " id = "Preloader_loading"> <span> </span> <span> </span> </span> <span> </span> <span> </span> </div> </div> </div> <iframe src = "http://jd.com"> </iframe> </body> </html>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。