W3C 標準では、進行状況バーが進行状況要素を使用して特定のタスクを完了することが規定されています。開発者は、進行状況タグを使用して進行状況バーを表示し、Web ページ上でのファイルのアップロードの進行状況を表します。 HTML にはこのタグが組み込まれており、Web 開発者にバーを表示する簡単な方法を提供します。このタグは
構文:
この進行要素には開始タグと終了タグの両方があり、以下にタグの基本構文を示します。これはあらゆるプロセスのステータスを意味します。プログレスバーにはインライン表示方式があります。
<Progress bar> …… </Progress bar>
属性は、HTML 内のエクスプローラーの動作などの情報要素を提供します。 HTML には、イベント属性とグローバル属性という 3 つの属性があります。これらの属性に加えて、progress 要素には 2 つの新しい属性があります:
max – デフォルト値は 1.0 で、タスクを完了するために必要な作業の総数を示します。
value – これは、完了する必要がある作業量を指定します。デフォルト値は 1.0 未満として割り当てられます。 Val 属性がない場合、進行状況バーは不定になります。
進行状況バーの例には、ファイルの添付、ドキュメントの初回読み込み、Web ページの読み込みなどが含まれます。
進行状況バーには、確定と不確定の 2 つの異なる状態があります。不定の進行状況バーの場合は、value 属性に null 値を割り当てます。これにより、スタイル設定が容易になります。一方、確定状態の場合は、以下の例に示すように、max と value という 2 つの新しい属性を定義します。動きのような外観を使用して、水平バーでタスクを示します。それぞれの作業がタスクに依存していない場合、<メーター＞タグが割り当てられています。ブラウザの互換性については、Internet Explorer（一部サポート）を除くすべてのブラウザに対応しています。ブラウザの互換性によっては、進行状況バーの外観が異なる場合があります。この記事では、max 属性と Val 属性によるバーの確定状態に焦点を当てます。
例: 次に、min 属性と val 属性を備えた進行状況バーの基本的な実装を見てみましょう。
<!DOCTYPE html>
<html>
<body>
Downloading on process:
<progress value="19" max="90">
</progress>
<p><strong>Note:</strong> The progress tag is used to represent a progress bar for quite period of time. </p>
</body>
</html>
</p>
<p><strong>出力:</strong></p>
<p><img src="https://img.php.cn/upload/article/000/000/000/172543966030232.png" alt="HTML プログレスバー" ></p>
<h4>1. CSS の使用</h4>
<p>次に、スタイリッシュなプログレスバーをすべてのプラットフォームで一貫して見せる方法を見ていきます。進行状況バーをマークアップするには、値セレクターを使用し、進行状況要素の幅や高さなどの寸法を調整して、視覚的に魅力的な進行状況バーを作成します。ただし、さまざまなブラウザを扱うと、このプロセスが複雑になる可能性があります。ブラウザーは、タスク完了の程度にいくつかの調整を加えます。 HTML バーに立体感を持たせて、率直な印象を与えています。</p>
<p><strong>例:</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:400px;height:40px}
</style>
</head>
<body>
<progress value="60" max="100"></progress>
</body>
</html>出力:
スタイルシートを使用すると、背景色を指定したり、高さを割り当てたりすることで、この要素にスタイル ルールを追加できます。色は、rgba() 関数を適用することで適用できます。進行状況バー要素をさまざまな色で表示すると、結果が適切に表示されます。これは属性「クラス」にマッピングされます。一般に、進行状況バーは左から右に移動してタスクを示し、最初の「0」から開始され、目標に到達すると結果が表示されます。
例:
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar demo </h1>
<style>
progress{width:200px;height:20px;background-color:pink;
border-radius: 4px;position: absolute;
right: 0px;
top: 80px;
box-shadow: 0 3px 6px rgba(255, 255, 0, 255) inset;}
</style>
</head>
<body>
<progress value="40" max="100"></progress>
</body>
</html>出力:
サンプル:
進行状況バー :: – WebKit-Progress-bar
プログレスバーのサイズもクラス属性を使用して小、中、大と変えることができます。
以下のコードは不定であり、何らかのプロセスがしばらく進行していることを示しています。
例:
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:120px;height:20px}
</style>
</head>
<body>
<progress max="100">
<span>20</span>%
</progress>
</body>
</html>出力:
次のルールは JavaScript を使用して実行する必要があります。
例 1
<!DOCTYPE>
<html>
<body>
<script>
var pgx=2;
function bar(){
var prog = document.getElementById ('progress demo');
setInterval (function ()
{
if(pgx<90){
pgx++;
prog.value =pgx;
}
bar();
}, 100);
}
</script>
<progress id="progress demo" min="2" max="100"></progress>
<br/><br/>
<button onclick="bar()"> submit</button>
</body>
</html>出力:
例 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>implementation of HTML progress Tag</title>
</head>
<body>
<h2> <i>Task in scheduled Progress </i></h2>
<p>Process: <progress id="bar" value="1" max="100"><span>0</span>%</progress></p>
<script type="text/javascript">
var k = 0;
var progb = document.getElementById("bar");
function count(){
if(k < 100){
k = k + 1;
progb.value = k;
progb.getElementsByTagName("span")[0].textContent = k;
}
setTimeout("count()", 400);
}
count();
</script>
</body>
</html>Output:
Therefore, this article explains how to create a highly flexible and lightweight HTML progress bar. Finally, we have briefly seen the concept as the activity indicator. This element indicates how to load a page or make some registration process and probably represents a percentage of 100 for the max value. When the length of the time task is unknown, developers usually use this mode in the installation or loading page scenario. And that’s even an implementation using Html5 with some cool effects.
以上がHTML プログレスバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
