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 コマンドの詳細な紹介

推薦する

Vue 仮想 DOM クイックスタート

目次仮想DOM仮想DOMとは何か仮想DOMの役割Vue の仮想 DOM vノードvNodeとはvNo...

CentOS インストール mysql5.7 詳細チュートリアル

この記事では、参考までに、centOSにmysql5.7をインストールする詳細な手順を紹介します。具...

グリッドはページのレイアウトプランです

<br /> 英語原文: http://desktoppub.about.com/od/...

Reactスロットの使い方

目次必要コアアイデアReactでスロットを実装する2つの方法必要コンポーネントを自分で書きました。コ...

CSS で div 凹角スタイルを実装するサンプル コード

通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角...

PSSHを使用してLinuxサーバーを一括管理する

pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...

Kubernetes ポッドオーケストレーションとライフサイクルの詳細な説明

目次K8Sマスター基本アーキテクチャポッドオーケストレーションコンセプトPod オブジェクトのプロパ...

インラインブロックを使用した複数のdiv間の間隔はプログラミング方法とは異なります

inline-block について学習しているときに、境界線と inline-block を持つ複数...

Vuexはセッションストレージデータを結合して、ページを更新するときにデータが失われる問題を解決します

目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...

Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...

Ubuntu 18.04 (物理マシン) で OpenWRT 開発環境を構成する方法

1. 仮想マシン(物理マシン)をインストールする仮想マシンまたは物理マシンにインストールできます。 ...

CSS でのフレックスレイアウトの詳細な説明

フレックス レイアウトは、エラスティック レイアウトとも呼ばれます。任意のコンテナーをフレックス レ...

InnoDB ロック (レコード、ギャップ、Next-Key ロック) の詳細な説明

レコード ロックは、単一のインデックス レコードをロックします。レコード ロックは常にインデックスを...

nginx を使用して特定のインターフェース (URL) をブロックする方法

1. はじめに場合によっては、Web プラットフォームがオンラインになった後、サービス インターフェ...

MySQL インデックス障害の上位 10 の問題の概要

目次背景1. クエリ条件に「or」が含まれているため、インデックスが失敗する可能性があります。 2....