HTML と CSS を使用して進行状況バーの色を設定するにはどうすればよいですか?

Web サイト開発では、進行状況バーは Web サイトの重要な部分です。プログレスバーはプロセスの進行状況を示します。これを利用すると、ユーザーは、読み込み時間、ファイルのアップロード、ファイルのダウンロード、その他の同様のタスクを含む、Web サイト上で行われている作業のステータスを確認できます。デフォルトでは灰色です。ただし、進行状況バーを目立たせて視覚的に魅力的にするには、HTML と CSS を使用して色を変更できます。

プログレスバーとは何ですか?

進行状況バーは、タスクの進行状況を表示するために使用されます。これはグラフィカル ユーザー インターフェイス要素です。これは基本的に、タスクの進行に応じて徐々に埋まっていく水平バーと、パーセンテージ値またはその他の完了インジケーターで構成されます。プログレスバーは、ファイルのアップロード、ファイルのダウンロード、ソフトウェアのインストールなどのプロセスが完了するまでにかかる時間に関するフィードバックをユーザーに提供するために Web アプリケーションで使用されます。

HTML を使用して進行状況バーを作成する

進行状況バーは、HTML マークアップ言語を使用して作成できます。 HTML5 では、 要素を使用して進行状況バーを作成できます。 HTML を使用して基本的なプログレス バーを作成する例を次に示します:

上記の例では、進行状況バーを作成し、進行状況バーを 30% 完了として表示し、value 属性を 30 に設定しました。 max 属性は 100 に設定されます。

例 1

例 1

HTML を使用して基本的なプログレス バーを作成する完全なコード例を次に示します

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

進行状況バーを作成したら、CSS を使用してスタイルを設定し、色を設定できます。 CSS は、プログレス バーの色を設定するための ::-webkit-progress-value 疑似要素を開発者に提供します。以下は、進行状況バーに CSS スタイルを適用する例です。

::-webkit-progress-bar 疑似要素と ::-webkit-progress-value 疑似要素の両方の背景色を設定します。同時に、 要素をターゲットとして進行状況バーの高さと幅を設定します。

例 2

以下は、HTML と CSS を使用して進行状況バーを作成するための完全なコード例です。

進行状況バーにテキストを追加する

進行状況バーにテキストを追加して、ユーザーに追加情報を提供します。これを行うには、::-webkit-progress-bar 疑似要素と ::-webkit-progress-value 疑似要素を使用して 2 つのレイヤーを作成します。ここで、進行状況値レイヤーは進行状況バー レイヤーの上にあります。例えば ​​-＃＃＃ リーリー

要素に追加しました。進行状況バーの上部に進行状況の値がテキストとして表示されます。また、進行状況バーの中央のテキストを修正し、そのフォント サイズを 18 ピクセルに設定しました。

リーリー ＃＃＃結論は＃＃＃

以上がHTML と CSS を使用して進行状況バーの色を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。