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