HTML プログレスバー

W3C 標準では、進行状況バーが進行状況要素を使用して特定のタスクを完了することが規定されています。開発者は、進行状況タグを使用して進行状況バーを表示し、Web ページ上でのファイルのアップロードの進行状況を表します。 HTML にはこのタグが組み込まれており、Web 開発者にバーを表示する簡単な方法を提供します。このタグは タグとはまったく異なります。タグ。ディスク容量の使用量を表します。また、HTML5 でサポートされており、HTML5 の継続的な成長により、興味深いツールの導入が可能になります。

構文:

この進行要素には開始タグと終了タグの両方があり、以下にタグの基本構文を示します。これはあらゆるプロセスのステータスを意味します。プログレスバーにはインライン表示方式があります。

<progress bar>
……
</progress>bar>

属性

属性は、HTML 内のエクスプローラーの動作などの情報要素を提供します。 HTML には、イベント属性とグローバル属性という 3 つの属性があります。これらの属性に加えて、progress 要素には 2 つの新しい属性があります:

max – デフォルト値は 1.0 で、タスクを完了するために必要な作業の総数を示します。

value – これは、完了する必要がある作業量を指定します。デフォルト値は 1.0 未満として割り当てられます。 Val 属性がない場合、進行状況バーは不定になります。

進行状況バーの例には、ファイルの添付、ドキュメントの初回読み込み、Web ページの読み込みなどが含まれます。

HTML でプログレスバーを作成する方法

進行状況バーには、確定と不確定の 2 つの異なる状態があります。不定の進行状況バーの場合は、value 属性に null 値を割り当てます。これにより、スタイル設定が容易になります。一方、確定状態の場合は、以下の例に示すように、max と value という 2 つの新しい属性を定義します。動きのような外観を使用して、水平バーでタスクを示します。それぞれの作業がタスクに依存していない場合、

例: 次に、min 属性と val 属性を備えた進行状況バーの基本的な実装を見てみましょう。

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>

出力:

1. CSS の使用

次に、スタイリッシュなプログレスバーをすべてのプラットフォームで一貫して見せる方法を見ていきます。進行状況バーをマークアップするには、値セレクターを使用し、進行状況要素の幅や高さなどの寸法を調整して、視覚的に魅力的な進行状況バーを作成します。ただし、さまざまなブラウザを扱うと、このプロセスが複雑になる可能性があります。ブラウザーは、タスク完了の程度にいくつかの調整を加えます。 HTML バーに立体感を持たせて、率直な印象を与えています。

例:

<h1 id="Using-Style-Sheet-in-Progress-bar"> Using Style Sheet in Progress bar </h1>
<style>
progress{width:400px;height:40px}
</style>


<progress value="60" max="100"></progress>

出力:

2.ボックスの影と色の使用

スタイルシートを使用すると、背景色を指定したり、高さを割り当てたりすることで、この要素にスタイル ルールを追加できます。色は、rgba() 関数を適用することで適用できます。進行状況バー要素をさまざまな色で表示すると、結果が適切に表示されます。これは属性「クラス」にマッピングされます。一般に、進行状況バーは左から右に移動してタスクを示し、最初の「0」から開始され、目標に到達すると結果が表示されます。

例:

<h1 id="Using-Style-Sheet-in-Progress-bar-demo"> 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>


<progress value="40" max="100"></progress>

出力:

注: ブラウザによってバーの処理方法が若干異なります。 Chrome は、ネイティブ スタイルを置き換えることによって Webkit スタイルシートを使用します。

サンプル:

進行状況バー :: – WebKit-Progress-bar

プログレスバーのサイズもクラス属性を使用して小、中、大と変えることができます。

3.スパン

の使用

以下のコードは不定であり、何らかのプロセスがしばらく進行していることを示しています。

例:

<h1 id="Using-Style-Sheet-in-Progress-bar"> Using Style Sheet in Progress bar </h1>
<style>
progress{width:120px;height:20px}
</style>


<progress max="100">
<span>20</span>%
</progress>

出力:

4. JavaScript の使用例

次のルールは JavaScript を使用して実行する必要があります。

を作成しています必要に応じて要素を追加し、次にスタイルシートを作成し、最後にそれらを一緒に埋め込みます。以下のコードは、JavaScript を使用した基本的な進行状況バーを示しています。

例 1

<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>

出力:

例 2

<title>implementation of HTML progress Tag</title>


<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>

Output:

NOTE: Even you can add some animation effects to the progress bar. To do so, we have to assign some interval timings by assigning some value to it and directing incrementing infinitely, to make the situation control conditional statement used.

Conclusion

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 サイトの他の関連記事を参照してください。