ホーム>Web デザインのチュートリアル>HTMLチュートリアル

HTML/CSSを介してさまざまなプログレスバー機能を実装する方法

著者：Eve Cole 更新時間：2024-12-17 11:56:52

要件: 現在のプラグインにはさまざまなプログレス バーがあるため、開発中にさまざまなプログレス バーを使用することになります。これは、カスタマイズされた開発とスタイルの便利な変更を容易にするために、ここでは HTML および CSS スタイルを使用します。バー機能。

この記事では、HTML/CSS を使用してさまざまな基本的なプログレス バーや派手なプログレス バーとそのアニメーションを作成する方法を理解します。

HTML タグ メーターを使用してプログレス バーを作成します。 HTML タグのプログレス バーを使用して、CSS のパーセンテージとグラデーションを使用して、ドーナツを作成します。形状のプログレス バー。CSS を使用して球状のプログレス バーを作成します。

1. 水平プログレスバーの効果は次のとおりです。

私たちが目にする最も一般的な進行状況バーは、水平の進行状況バーです。これは最も一般的で、主に HTML5 を使用して 2 つのネイティブ タグを提供し、プログレス バーを実装します。

メーターの具体例としては以下のようなものがあります。 

 <p>
<span>完全性:</span>
<meter min="0" max="500" value="350">350 度</meter>
</p>

このうち、min、max、valueはそれぞれ最大値、最小値、現在値を表します。

タグの使用法を見てみましょう。 

 <p>
<label for="file">完全性:</label>
<progress max="100" value="70"> 70% </progress>
</p>

このうち、max 属性は、progress 要素で表されるタスクに対して完了する必要がある作業量の合計を記述し、value 属性は、プログレス バーで完了した作業量を指定するために使用されます。

2 つの違いは次のとおりです。そこで質問は、上記のデモから判断すると、2 つのラベルの効果はまったく同じですが、両者の違いは何でしょうか?一見同一に見えるラベルが 2 つあるのはなぜですか?これら 2 つの要素の最大の違いは、意味上の違いです。メーターは、既知の範囲内のスカラー測定値または小数値を表します。たとえば、車の現在の速度値を表示したい場合は、要件の現在の完了レベルを使用します。ダッシュボード、メーターを使用する必要があります。

メーターと進行状況の制限もちろん、実際のビジネス要件や運用環境では、メーターと進行状況のラベルが表示されることはほとんどありません。背景色や進行状況の前景色など、メーターと進行状況のラベルのスタイルを効果的に変更することはできません。そして、最も致命的なのは、ブラウザのデフォルト スタイルのパフォーマンスがブラウザ間で一貫していないことです。これは、安定性と一貫した UI パフォーマンスを追求するビジネスにとって致命的な欠点です。一部の実際のアプリケーション シナリオでは、CSS を使用してプログレス バーを実装するだけではないため、アニメーション効果やインタラクティブな効果を追加することはできません。

したがって、この段階では、進行状況バーを実装するためにより多くの CSS メソッドが使用されます。

(1) パーセンテージを使用してプログレス バーを実装する最も一般的な方法の 1 つは、背景色とパーセンテージを組み合わせて使用​​し、グラデーションのあるプログレス バーを作成することです。最も単純なデモの例は次のとおりです。 

 <div class="g-container">
<div class="g-progress"></div>
</div>
<div class="g-progress"></div>

同様に、HTML スタイル属性を使用して完全な背景値を入力し、実際のパーセンテージを渡すことができます。もちろん、アニメーション効果を実現するには、CSS カスタム属性を使用することをお勧めします。 CSS @property を使用してコードを変換します。 

 <div class="g-progress" style="--progress: 70%"></div>
@property --progress {
構文: '<パーセント>';
継承: false;
初期値: 0%;
}
.g-進行状況 {
マージン: 自動;
幅: 240ピクセル;
高さ: 25px;
境界半径: 25px;
背景: 線形グラデーション(90度、#0f0、#0ff var(--progress)、透明な0);
ボーダー: 1px ソリッド #eee;
遷移: .3s --progress;
}

2. 円形の進行状況バーの効果は次のとおりです。

中心となるのは、角度グラデーションの背景を使用することです: conic-gradient():効果の例は次のとおりです。

コードは次のとおりです。

 <div class="進行状況サークル"
	v-for="(項目,インデックス)進行中のリスト" :key="インデックス"
:style="{
背景: `radial-gradient(#fff 55%、transparent 56%)、conic-gradient(#3A7CFF ${item.rate}%、#f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0.4 : 0 }%),radial-gradient(#fff 60%, #F1F3FC 0%);`
}
">
<span class="progress-value" >{{item.name}}</span>
<div class="totalvalbox" >
{{ item.rate }}%
</div>
</div>
<style lang="scss" スコープ>
.progress-circle {
位置: 相対的;
幅: 149rpx;
高さ: 149rpx;
フォントファミリー: PingFang SC;
境界半径: 50%;
ディスプレイ: フレックス;
整列項目: 中央;
コンテンツの位置揃え: 中央;
}
	.progress-value {
	位置: 絶対;
	テキスト整列: 中央;
	行の高さ: 50rpx;
	幅: 100%;
	フォントの太さ: 400;
フォントサイズ: 26rpx;
}
	.totalvalbox {
最小幅: 217rpx;
テキスト整列: 中央;
位置: 絶対;
下: -50rpx;
フォントの太さ: 400;
フォントサイズ: 30rpx;
}
</スタイル>

最適化問題は次のとおりです。

ここで発生する傾向がある問題は次のとおりです。 角度勾配のある円弧プログレス バーを実現する場合の制限 もちろん、この方法には 2 つの欠点があります。もちろん、進行率が 0°、90°、180°、270°、360° などの数値ではない場合、角度グラデーションを使用すると、異なる色の接続部分に明らかなギザギザのエッジが表示されます。 conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D) の例を見てみましょう。

このような問題の解決策は、接続点に勾配スペースを残すことです。上記の角度勾配コードを単純に変換してみましょう。

 {
- 背景: 円錐勾配(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
+ 背景: 円錐勾配(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}

上記のコードをよく見てください。27% から 27.2% への変更は、変更後の実際の効果です。

場合によっては、プログレス バーの端に丸い角を持つプログレス バーが表示されることがあります。もちろん、プログレス バーの色が単色であれば、この状況も解決できます。この効果は、2 つを重ね合わせることで実現できます。最初と最後に小さな円。プログレスバーがグラデーションカラーの場合、このプログレスバーはSVG/キャンバスを使用して実装する必要があります。

例は次のとおりです。

html

 <div class="g-progress"></div>
<div class="g-container">
<div class="g-progress"></div>
<div class="g-circle"></div>
</div>

css

本文、html {
幅: 100%;
高さ: 100%;
ディスプレイ: フレックス;
}
.g-コンテナ {
位置: 相対的;
マージン: 自動;
幅: 200ピクセル;
高さ: 200ピクセル;
}
.g-進行状況 {
位置: 相対的;
マージン: 自動;
幅: 200ピクセル;
高さ: 200ピクセル;
境界半径: 50%;
背景: 円錐勾配(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
マスク: 放射状グラデーション(透明、透明 80px、#000 80.5px、#000 0);
}
.g-circle {
位置: 絶対;
トップ: 0;
左: 0;
＆：：前に、
＆：：後 {
コンテンツ： "";
位置: 絶対;
上: 90ピクセル;
左: 90ピクセル;
幅: 20ピクセル;
高さ: 20px;
境界半径: 50%;
背景: #FFCDB2;
z インデックス: 1;
}
＆：：前に {
変換: 変換(0, -90px);
}
＆：：後 {
変換: 回転(90度) 変換(0, -90px);
}
}

この拡張に基づいて、複数色の円弧状の進行状況バーを実装することもできます(これは進行状況バーのようには見えないかもしれませんが、円グラフに似ています)。 

 .g-進行状況 {
幅: 160ピクセル;
高さ: 160ピクセル;
境界半径: 50%;
マスク: 放射状グラデーション(透明、透明 50%、#000 51%、#000 0);
背景：
円錐勾配(
#FFCDB2 0、#FFCDB2 25%、
#B5838D 25%、#B5838D 50%、
#673ab7 50%、#673ab7 90%、
#ff5722 90.2%、#ff5722 100%
);
}

3. 球状の進行状況バーの効果は次のとおりです。

次のような球形の進行状況バーも比較的一般的です。

コア コードは次のとおりです。球形のコンテナが進行状況 0% ～ 100% を示すときの波の高さを制御するだけです。 0%から100%までのアニメーション効果を得ることができます

<div class="コンテナ">
<div class="wave-change"></div>
<div class="wave"></div>
</div>
。容器 {
幅: 200ピクセル;
高さ: 200ピクセル;
ボーダー: 5px ソリッド rgb(118, 218, 255);
境界半径: 50%;
オーバーフロー: 非表示;
}
.wave-change {
位置: 絶対;
幅: 200ピクセル;
高さ: 200ピクセル;
左: 0;
トップ: 0;
アニメーション: 12 秒の無限リニアを変更します。
＆：：前に、
＆：：後{
コンテンツ： "";
位置: 絶対;
幅: 400ピクセル;
高さ: 400ピクセル;
トップ: 0;
左: 50%。
背景色: rgba(255, 255, 255, .6);
境界半径: 45% 47% 43% 46%;
変換: 変換(-50%、-70%) 回転(0);
アニメーション: 7 秒のリニア無限回転。
z インデックス: 1;
}
＆：：後 {
境界半径: 47% 42% 46% 44%;
背景色: rgba(255, 255, 255, .8);
変換: 変換(-50%、-70%) 回転(0);
アニメーション: 9 秒のリニア -4 秒の無限回転。
z インデックス: 2;
}
}
.wave {
位置: 相対的;
幅: 200ピクセル;
高さ: 200ピクセル;
背景色: rgb(118, 218, 255);
境界半径: 50%;
}
p {
位置: 絶対;
トップ: 50%;
左: 50%。
変換: 変換(-50%, -50%);
フォントサイズ: 36px;
色: #000;
z インデックス: 10;
}
@keyframes 回転 {
に {
変換: 平行移動(-50%、-70%) 回転(360度);
}
}
@キーフレーム変更 {
から {
上: 80ピクセル;
}
に {
上: -120ピクセル;
}
}

4. クール充電の進行状況バーは次のとおりです。

もちろん、CSS は常に変化しており、プログレス バーの種類は上記のカテゴリに限定されません。たとえば、フィルタを使用して Huawei 携帯電話の充電アニメーションを模倣できます。これは進行状況バーを表示する方法でもあり、純粋な CSS を使用して実装することもできます。

コアコードは次のとおりです

<div class="g-container">
<div class="g-number">98.7%</div>
<div class="g-contrast">
<div class="g-circle"></div>
<ul class="g-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
html、
体 {
幅: 100%;
高さ: 100%;
ディスプレイ: フレックス;
背景: #000;
オーバーフロー: 非表示;
}
.g-番号 {
位置: 絶対;
幅: 300ピクセル;
トップ: 27%;
テキスト整列: 中央;
フォントサイズ: 32px;
z インデックス: 10;
色: #fff;
}
.g-コンテナ {
位置: 相対的;
幅: 300ピクセル;
高さ: 400ピクセル;
マージン: 自動;
}
.g-コントラスト {
フィルター: コントラスト(10) 色相回転(0);
幅: 300ピクセル;
高さ: 400ピクセル;
背景色: #000;
オーバーフロー: 非表示;
アニメーション: hueRotate 10 秒無限リニア;
}
.g-circle {
位置: 相対的;
幅: 300ピクセル;
高さ: 300ピクセル;
ボックスのサイズ設定: ボーダーボックス;
フィルター: ぼかし(8px);
＆：：後 {
コンテンツ： "";
位置: 絶対;
トップ: 40%;
左: 50%。
変換: 変換(-50%, -50%) 回転(0);
幅: 200ピクセル;
高さ: 200ピクセル;
背景色: #00ff6f;
境界半径: 42% 38% 62% 49% / 45%;
アニメーション: 10 秒の無限リニア回転。
}
＆：：前に {
コンテンツ： "";
位置: 絶対;
幅: 176ピクセル;
高さ: 176ピクセル;
トップ: 40%;
左: 50%。
変換: 変換(-50%, -50%);
境界半径: 50%;
背景色: #000;
z インデックス: 10;
}
}
.g-バブル {
位置: 絶対;
左: 50%。
下: 0;
幅: 100ピクセル;
高さ: 40ピクセル;
変換: 変換(-50%, 0);
境界半径: 100px 100px 0 0;
背景色: #00ff6f;
フィルター: ぼかし(5px);
}
リ {
位置: 絶対;
境界半径: 50%;
背景: #00ff6f;
}
@for $i 0 ～ 15 {
li:nth-child(#{$i}) {
$width: 15 + ランダム(15) + ピクセル;
左: 15 + ランダム(70) + ピクセル;
トップ: 50%;
変換: 変換(-50%, -50%);
幅: $width;
高さ: $幅;
アニメーション: moveToTop #{random(6) + 3}s easy-in-out -#{random(5000)/1000}s 無限;
}
}
@keyframes 回転 {
50% {
境界半径: 45% / 42% 38% 58% 49%;
}
100% {
変換: 平行移動(-50%、-50%) 回転(720度);
}
}
@keyframes moveToTop {
90% {
不透明度: 1;
}
100% {
不透明度: .1;
変換: 変換(-50%, -180px);
}
}
@keyframes hueRotate {
100% {
フィルター: コントラスト(15) 色相回転(360度);
}
}

5. ドラッグして拡張します

最後に、高品質でクールなプログレスバーをいくつかお勧めします。

上記の効果の完全な実装はクリックできます - CSS を巧みに使用してクールな充電アニメーションを実現します

これで、HTML/CSS を使用してさまざまなプログレス バー機能を実装する方法についての記事は終了です。記事の紹介は以上です。その他の関連する HTML CSS プログレス バーのコンテンツについては、downcodes.com の過去の記事を検索するか、引き続き以下の関連記事を参照してください。今後も downcodes.com をサポートしていただければ幸いです。

関連記事