ページ読み込みの動的なプログレスバーを作成するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-10-30 11:52:03
オリジナル
853 人が閲覧しました

How to Create a Dynamic Progress Bar for Your Page Load?

ページの読み込みプロセスに進行状況バーを統合する方法

ページの読み込み中に、進行状況バーはユーザーに貴重なフィードバックを提供できます。データの取得とページのレンダリングの進行状況。この記事では、ページの読み込み中に実行中のプログレス バーを実装するプロセスについて説明します。

コード構造

プログレス バーを実装するには、コンテナ要素を使用して進行状況を表示し、JavaScript を使用して読み込みの進行状況に基づいて幅または長さを更新します。コード構造は次のようになります。

<code class="html"><div id="progress-container">
  <div id="progress-bar"></div>
</div></code>
ログイン後にコピー

JavaScript イベント処理

読み込みの進行状況をキャプチャするには、progress イベント (最新のブラウザでサポートされている) を利用できます。 )。使用方法の例を次に示します。

<code class="javascript">window.addEventListener("progress", (e) => {
  if (e.lengthComputable) {
    const percentage = (e.loaded / e.total) * 100;
    const progressBar = document.getElementById("progress-bar");
    progressBar.style.width = `${percentage}%`;
  }
});</code>
ログイン後にコピー

進行状況バーのスタイル設定

進行状況バーのスタイルを設定するには、CSS を使用できます。以下に例をいくつか示します。

<code class="css">#progress-container {
  width: 100%;
  height: 5px;
  background-color: #f0f0f0;
}

#progress-bar {
  height: 100%;
  background-color: #008000;
}</code>
ログイン後にコピー

結論

イベント処理と CSS スタイルを利用することで、読み込みステータスを視覚的に伝える動的な進行状況バーを作成できます。ユーザーのブラウジング体験を向上させます。

以上がページ読み込みの動的なプログレスバーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!