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 つのレイヤーを作成します。ここで、進行状況値レイヤーは進行状況バー レイヤーの上にあります。例えば ​​-＃＃＃ リーリー

上記の例では、::before 疑似要素を

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

例 3

以下は、進行状況バーにテキストを追加するための完全なコード例です。

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

ここでは、プログレスバーが Web 開発において貴重なツールであることについて説明しました。ウェブサイト上の作業の進捗状況に関するフィードバックをユーザーに提供します。ウェブサイト全体のデザインに合わせてカスタマイズすることも可能です。

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