HTML5プログレスバーの詳しい説明

HTML5プログレスプログレスバーの詳細説明

HTML5プログレス要素の紹介 progressはHTML5の新しい要素で、プログレスバーを定義することを意味し、幅広い用途があり、ファイルの進行状況を表示するために使用できます。アップロードやファイルのダウンロードの読み込みステータス バーとしても使用できます。

html5の進行状況プログレスバーの構文 '70' max= '100' >

ここをクリックして、HTML5 プログレスバーがどのように表示されるかを確認してください。

html5 progress 属性 progress max max 属性は、プログレス バーの最大進行状況値を表します。この値がある場合、0 より大きい有効な浮動小数点数でなければなりません。 max のデフォルト値は 1 です。

progress value value 属性はプログレスバーの進行状況を示し、値の範囲は 0 から max までです。 max 属性が設定されていない場合、value 属性の範囲は 0 から 1 である必要があります。

値がない場合、完了の進行状況は不確かです。現時点ではタスクが進行中であることを意味しますが、完了までにどれくらい時間がかかるかは不明です。現時点では、進行状況は Webkit ブラウザーの読み込みとして使用され、ページが読み込まれていること、または Ajax がバックグラウンド データを要求していることを示します。

上の写真はChromeブラウザから取得したものです。

値を設定せずに進行すると、中央の進行ブロックが行ったり来たりするローディングのようなものになります。

Windows 7 では、値のない進行状況は次のようになります。

これは確かに少し醜いですが、Windows の典型的なスタイルを継承しています。

html5 progress の互換性 progress は IE10 以降のブラウザーでサポートされています

html5進捗状況エフェクト表示 進行アニメーション効果のシミュレーションコードは次のとおりです:

您的浏览器不支持progress元素

function goprogress(){ var pro=document.getElementsByTagName("progress")[0]; gotoend(pro,0); } function gotoend(pro,value){ var value=value+1; pro.value=value; if(value

点击这里查看progress动画模拟。

html5 progress相关样式设置 我们以实现一个progress的自定义样式为例子，来讲述progress有哪些样式可以供我们设置。

我们要把progress改变成上面这种模样。

代码如下：

您的浏览器不支持progress元素 .mypro{ background:orange; border:1px solid red; border:2px solid #000; width:300px; height:50px; -webkit-appearance: none; } ::-ms-fill{ background:deeppink; } ::-moz-progress-bar{ background:deeppink; } ::-webkit-progress-bar{ background:orange; } ::-webkit-progress-value{ background:deeppink; } rrreee

🎜

🎜 html5 進捗相关样式设置 我们以实现一進行的自定义样式例子，来讲述進行有哪これら样式可提供 🎜

🎜 🎜

🎜

私たちは、進行状況をこのようなモードに変更するつもりです。 🎜🎜

代码如下： 🎜

🎜🎜

🎜🎜🎜🎜🎜🎜🎜rrreee

🎜🎜🎜🎜🎜🎜

progress では、幅、高さ、境界線などの共通の属性を設定できます。

IE10+ および Firefox ブラウザーの場合、背景を使用して進行状況バーの背景色を設定できます。

Webkit ブラウザの場合、::-webkit-progress-bar を使用して進行状況バーの背景色を設定します。

IE10 以降の場合、::-ms-fill を使用してプログレスバーの完了進行状況の背景色を設定します。

Firefox の場合、::-moz-progress-bar を使用して、進行状況を完了するためのプログレスバーの背景色を設定します。

Webkit ブラウザの場合、::-webkit-progress-value を使用して、進行状況バーの完了進行状況の背景色を設定します。

注:::-webkit-progress-bar は進行状況バーの背景色を設定し、::-moz-progres-bar は進行状況バーの背景色を設定します。進行状況を完了します。色はまったく逆です。

また、IOS 上の Webkit ブラウザーの場合は、背景色と進行状況の色が機能するように、 -wekbit-Appearance:none を使用して進行状況のデフォルトのスタイルをクリアする必要があります。

カスタム進行状況バーのスタイルを表示するには、ここをクリックしてください。

html5 進捗状況の結論

Upload.onprogress イベント コールバックで進捗状況を使用すると、ajax2 アップロード ファイルでのファイル アップロードの進捗状況を簡単に表示できます。 FileReader のプレビュー イメージで使用される onprogress イベントの progress 要素を使用して、イメージの読み取りの進行状況を表示することもできます。

この記事では、HTML5 プログレスバーについて説明します。関連コンテンツについては、php 中国語 Web サイトを参照してください。

HTML5プログレスバーの詳しい説明

関連記事