CSS を使用してプログレスバーと順序プログレスバーを実装する例

CSS を使用してプログレスバーと順序プログレスバーを実装する例

この半月、期末試験の準備にかなりのエネルギーを費やしました。今日はしっかり復習するべきだったのですが、気分が良くなかったので、とにかく楽しいことを探しました。すると、前回の面接で面接官がした質問を思い出したので(タイトル参照)、簡単なものを作って自分を洗脳しました。

簡単な効果図は次のとおりです。

プログレスバーを実現するための CSS:

HTML構造:

<div id="進捗">
    70%
</div>

CSS スタイル:

#進捗{
    幅: 50%; 
    高さ: 30px;
    境界線:1px実線 #ccc;
    境界線の半径: 15px;
    マージン: 50px 0 0 100px;
    オーバーフロー: 非表示;
    ボックスシャドウ: 0 0 5px 0px #ddd インセット;
}

#進捗状況スパン{
    表示: インラインブロック;
    幅: 70%;
    高さ: 100%;
    background: #2989d8; /* 古いブラウザ */
    背景: -moz-linear-gradient(45度, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
    背景: -webkit-gradient(linear, 左下, 右上, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome、Safari4+ */
    背景: -webkit-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Chrome 10+、Safari 5.1+ */
    背景: -o-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Opera 11.10+ */
    背景: -ms-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* IE10+ */
    背景: linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* W3C */
    フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* 水平グラデーションの IE6-9 フォールバック */
    背景サイズ: 60px 30px;
    テキスト配置: 中央;
    色:#fff;
}

プログレス バーの場合、プログレス カラーは単色にすることもできます。グラデーションを使用する場合は、次の Web サイトにアクセスしてください: http://www.colorzilla.com/gradient-editor/。この方法では、グラデーション効果を簡単に完成できます。これは、PS を使用した操作とまったく同じです。背景をグラデーションに設定した後、繰り返し効果を実現するために background-size も設定する必要があります。

注文進捗バーを実装するための CSS:

HTML構造:

<div id="プログレスバー">
     <!-- 進捗状況バー -->
     <div>
         <span></span>
     </div>
     <!-- 5 つの円 -->
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>

CSS スタイル:

#プログレスバー{
    幅: 80%;
    高さ: 50px;
    位置: 相対的;
    マージン: 50px 0 0 100px;
}
#プログレスバー div{
    幅: 100%;
    高さ: 10px;
    位置: 絶対;
    上位:50%;
    左: 0;
    上マージン:-20px;
    境界線:1px実線 #ddd;
    背景: #ccc;
}
#progressBar div span {
    位置: 絶対;
    表示: インラインブロック;
    背景: 緑;
    高さ: 10px;
    幅: 25%;
}
#プログレスバー>span{
    位置: 絶対;
    トップ:0;
    上マージン: -10px;
    幅: 40px;
    高さ: 40px;
    境界線:2px実線 #ddd;
    境界線の半径: 50%;
    背景: 緑;
    左マージン: -20px;
    色:#fff;
}
#プログレスバー>span:nth-child(1){
    残り: 0%;
}
#プログレスバー>span:nth-child(2){
    左: 25%;
    背景:緑;
}
#プログレスバー>span:nth-child(3){
    左: 50%;
    背景:#ccc;
}
#プログレスバー>span:nth-child(4){
    左: 75%;
    背景:#ccc;
}
#プログレスバー>span:nth-child(5){
    左: 100%;
    背景:#ccc;
}

次に、JS を使用して動的なプログレス バーを実現します。

PS: CSS スタイルは最適化されていません。CSS コードをデバッグしているときに、最初の円のスタイルが機能していないことがわかったので、デフォルトの背景色を緑に変更しました。この小さなバグを解決するのに協力してくれるブロガーがメッセージを残してくれることを願っています。ありがとうございます!!!

オリジナルリンク: https://www.cnblogs.com/jr1993/p/4598630.html

上記は、CSS でプログレスバーとオーダープログレスバーを実装する例の詳細です。CSS でプログレスバーを実装する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<:  Vueデータプロキシの詳細な説明

>>:  Linux の wget コマンドの詳細な紹介

推薦する

Linux サーバー上で nvidia-docker 環境を設定するプロセスの詳細な説明

Docker はコンテナに相当し、必要な動作環境に応じて対応する動作環境を構築できます。このとき、各...

ウェブページ制作TDは隠し表示もオーバーフロー可能

おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目...

Vueは大画面ページのスクリーン適応を実現します

この記事では、大画面ページのスクリーンアダプテーションを実現するためのVueの具体的なコードを参考ま...

type=fileファイル変更フォームの名前が正常にエコーされない問題を解決

easyui フレームワークのコードは次のとおりです。 css: .ファイルボックス{ フロート:...

HTML+CSS+jQuery はスクリーンショットで検索ホットリストタブ効果を模倣します

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

Linux環境でのDockerインストールチュートリアル

1. 設置環境Dockerは次のCentOSバージョンをサポートしていますCentOS 6.5 (6...

Win10にCentOS7仮想マシンをインストールする

1. VMware Workstation 64バージョンをダウンロードするhttps://www....

Nginx で WordPress 擬似静的を設定する方法の例

Baidu の擬似静的の説明を引用します。擬似静的は、実際の静的に相対的です。通常、検索エンジンの使...

ウェブページ作成時に標準 HTML コードを使用する際のポイント

多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...

HTML内の画像はbase64でエンコードされた文字列に直接置き換えられます

最近、画像はあるのに外部画像リソースが参照されていないウェブページを見つけました。気になりました。コ...

16進カラーコード(完全版)

赤とピンク、およびそれらの 16 進コード。 #990033 #CC6699 #FF6699 #FF...

Vue実戦記録のログインページの実装

目次1. 事前準備1.1 Node.jsをインストールする1.2 webpackをインストールする1...

Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法

序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...

HTML iframe で親ページと子ページ間の双方向メッセージングを実装する例

ある日、リーダーはメイン ページに iframe を埋め込み、親ページと子ページ間で双方向にメッセー...