CSSでプログレスバーを実装する方法

プログレスバーのCSS実装

プログレスバーは共通コンポーネントとして、さまざまなWebサイトやアプリケーションでよく表示されます。たとえば、ダウンロードの進行状況、アップロードの進行状況、Web ページの読み込みの進行状況などです。 CSS を使用してプログレス バーを実装するのは非常に簡単ですが、この記事ではプログレス バーの実装方法を詳しく紹介します。

HTML 構造

単純な進行状況バーを実装するには、最初に HTML 構造を定義する必要があります。以下は最も基本的な HTML 構造です。

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

このうち、progress はプログレス バーを表すコンテナであり、progress-bar はプログレス バーそのものを表します。もちろん、progress に進行状況テキストなどの要素を追加することもできます。

CSS スタイル

次に、進行状況バーを実装するために CSS スタイルを追加する必要があります。

まず、progress コンテナの幅と高さを設定し、position:relative と overflow:hidden を設定する必要があります。 CSS プロパティ。これにより、プログレス バーがコンテナ内に表示され、コンテナの外のコンテンツが非表示になると同時に、プログレス バー コンテナの位置が相対位置に設定されます。

.progress {
  width: 100%;
  height: 20px;
  position: relative;
  overflow: hidden;
}

次に、progress-bar の絶対位置を設定し、左マージンを 0 に設定します。同時にプログレスバーの幅を0に設定し、最初はプログレスバーが表示されないようにします。

.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #007bff;
  transition: width 0.8s ease;
}

コードの説明:

• left: 0 は、進行状況バーをコンテナの左端に配置することを意味します。
• top: 0 は、進行状況バーをコンテナーの上部に配置することを意味します。
• width: 0 プログレスバーの初期幅が 0 であるため、最初は表示されないことを示します。
• height: 100% は、進行状況バーの高さをコンテナと同じ高さに設定することを意味します。
• background-color: #007bff は、進行状況バーの色を設定します。
• transition: width 0.8s easy は、CSS トランジション アニメーションを使用して、プログレス バーの幅を目標値までゆっくりと増加させることを意味します。

最後に、JavaScript または CSS アニメーションを使用して、進行状況を表示する進行状況バーの幅を制御できます。 JavaScript を使用した例を次に示します。

const progressBar = document.querySelector('.progress-bar');
let percentage = 0;

function progress() {
  if (percentage < 100) {
    percentage++;
    progressBar.style.width = percentage + '%';
  } else {
    clearInterval(intervalId);
  }
}

const intervalId = setInterval(progress, 20);

この例では、進行状況バーの幅を 0% から 100% まで徐々に増加させ、100% で停止します。実際の状況に応じて、進行状況バーの幅と増加速度を定義することもできます。

JavaScript を使用したくない場合は、CSS アニメーションを使用して進行状況バーの効果を実現することもできます。以下は、単純な CSS アニメーションの例です。

.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #007bff;
  animation: progress 5s ease-in-out;
}

@keyframes progress {
  0% {
    width: 0;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

この例では、プログレス バーの幅を 0% から 100% まで徐々に増加させ、特定の時間内に完了します。このうち、animation 属性は、アニメーションの名前、時間、イージング方法を定義します。 @keyframes は、進行状況バーのアニメーションを 0% から 100% まで定義するキー フレームを表します。

概要

以上はCSSを使用してプログレスバーを実装する方法です。 HTML 構造と CSS スタイルを組み合わせることで、基本的なプログレス バーを簡単に完成させることができます。実装に関しては、JavaScript または CSS アニメーションを使用して進行状況を表示するプログレス バーの幅を制御できます。さまざまなプロジェクトで、より良い結果を達成するには、実際の状況に応じて進行状況バーのスタイルと表示方法を定義する必要があります。

以上がCSSでプログレスバーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。