HTML プログレスバー-htmlチュートリアル-php.cn

属性

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

1. CSS の使用

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

3.スパン

4. JavaScript の使用例

Conclusion

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML プログレスバー

王林

Sep 04, 2024 pm 04:47 PM

html html5 HTML Tutorial HTML Properties HTML tags

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 つの新しい属性を定義します。動きのような外観を使用して、水平バーでタスクを示します。それぞれの作業がタスクに依存していない場合、<メーター＞タグが割り当てられています。ブラウザの互換性については、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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543966030232.png" class="lazy" alt="HTML プログレスバー" ></p>
<h4 id="CSS-の使用">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>

ログイン後にコピー

出力:

HTML プログレスバー

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

スタイルシートを使用すると、背景色を指定したり、高さを割り当てたりすることで、この要素にスタイルルールを追加できます。色は、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>

ログイン後にコピー

出力:

HTML プログレスバー

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

サンプル:

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

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

3.スパン

の使用

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

例:

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

ログイン後にコピー

出力:

HTML プログレスバー

4. JavaScript の使用例

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

を作成しています必要に応じて要素を追加し、次にスタイルシートを作成し、最後にそれらを一緒に埋め込みます。以下のコードは、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>

ログイン後にコピー

出力:

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:

HTML プログレスバー

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。