HTML、CSS、jQuery を使用して動的ページ読み込みプログレスバーを作成する方法

HTML、CSS、jQuery を使用して動的なページ読み込みの進行状況バーを作成する方法

Web 開発では、ページ読み込みの進行状況バーは、ユーザーが簡単に操作できる一般的な機能です。ページ読み込みプロセスを明確に理解し、ユーザー エクスペリエンスを向上させます。この記事では、HTML、CSS、jQuery を使用して動的なページ読み込みプログレス バーを作成する方法と、具体的なコード例を紹介します。

1. HTML 構造

まず、HTML で進行状況バーを表示するコンテナを追加する必要があります。 タグの先頭に、次のコードを追加します。

<div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>

このうち、progress-bar-container はコンテナのクラス名です。 、プログレス バーの位置とスタイルの設定に使用されます。progress-bar はプログレス バーのクラス名で、プログレス バーのアニメーション効果を設定するために使用されます。

2. CSS スタイル

次に、CSS を使用して進行状況バーを美しくする必要があります。 <style> タグに、次のコードを追加します。

.progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #f0f0f0;
}

.progress-bar {
  height: 100%;
  background-color: #4caf50;
  width: 0;
  transition: width 0.3s ease;
}

ここでは、プログレス バー コンテナの幅を 100%、高さを 5px に設定し、背景色を設定します。 ; プログレスバー 高さは 100%、背景色は緑色、幅は 0 に設定されています。CSS トランジション効果を使用すると、幅が変化するときにスムーズなトランジション アニメーションが表示されます。

3. jQuery コード

最後に、jQuery を使用してプログレス バーの動的な効果を実現します。 <script> タグに、次のコードを追加します。

$(window).on('load', function() {
  var progressBar = $('.progress-bar');
  var progressBarContainer = $('.progress-bar-container');
  var max = $(document).height() - $(window).height();
  var value = 0;

  progressBarContainer.slideDown(300);

  $(document).on('scroll', function() {
    var scrollTop = $(window).scrollTop();
    value = (scrollTop / max) * 100;
    progressBar.css('width', value + '%');
  });

  $(window).on('resize', function() {
    max = $(document).height() - $(window).height();
    var scrollTop = $(window).scrollTop();
    value = (scrollTop / max) * 100;
    progressBar.css('width', value + '%');
  });

  progressBarContainer.fadeOut(300);
});

上記のコードは、まずプログレス バーとプログレス バー コンテナの jQuery オブジェクトを取得し、次に最大高さを計算します。ページをスクロールできるようにし、プログレスバーの値を 0 に初期化します。

次に、scroll イベントをリッスンして、現在のスクロール位置をリアルタイムで取得し、それをパーセンテージに変換してプログレス バーの幅を変更します。

同時に、resize イベントをリッスンすることで、ウィンドウ サイズが変更されると、ページがスクロールできる最大の高さが再計算され、プログレス バーの幅が更新されます。

最後に、ページが読み込まれた後、進行状況バーのコンテナーがフェードアウトして消えます。

4. 使用方法

上記コードを該当箇所に追加後、.html形式でファイルを保存し、ブラウザでファイルを開きます。ページの読み込み進行状況バーの動的効果を確認します。

概要

この記事では、HTML、CSS、jQuery を使用して動的なページ読み込みの進行状況バーを作成する方法を紹介します。 HTML 構造を追加し、CSS スタイルを設定し、jQuery のイベント リスニングと CSS トランジション効果を組み合わせることで、ページの読み込みプロセスをリアルタイムで表示し、ユーザー エクスペリエンスを向上させることができます。

この記事がお役に立てば幸いです!

以上がHTML、CSS、jQuery を使用して動的ページ読み込みプログレスバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。