円形グラデーションプログレスバー効果を実現する CSS サンプルコード

実装のアイデア

一番外側は大きな円（グラデーションカラー）
グラデーションの円を覆うように、内側に半円を 2 つ描きます (わかりやすくするために、左側と右側の色が異なり、グレーブルーに設定されています)
右側の青い半円を時計回りに回転させると、下のグラデーションの円が現れます。例えば、45 度 (45/360 = 12.5%) 回転させ、右側の青い半円をグレーに設定すると、12.5 の円グラフが描画されます。
より大きな角度で回転してみてください。180 度回転すると、右側の半円が重なります。さらに回転させると、角度がどんどん小さくなるように見え、ニーズを満たしていません。右側の円を元の位置に戻し、背景色を基本色と同じに設定し、左側の半円を時計回りに回転させます。
最後に、パーセンテージを示すために中央に小さな白い円を追加します。

図に示すように:

パーセント

注目すべき特性:

background-image は、要素に 1 つ以上の背景画像を設定するために使用されます。グラデーションカラーは linear-gradient によって実現できます。
クリップは、要素のどの部分が表示されるかを定義します。 clip プロパティは、position:absolute の要素にのみ適用されます。

次のコードは33%の円を描きます

<div class="circle-bar">
    <div class="circle-bar-left"></div>
    <div class="circle-bar-right"></div>
    <div class="mask">
        33%
    </div>
</div>

.circle-bar {
    背景画像: 線形グラデーション(#7affaf, #7a88ff);
    幅: 182ピクセル;
    高さ: 182px;
    位置: 相対的;
}
.circle-bar-left {
    背景色: #e9ecef;
    幅: 182ピクセル;
    高さ: 182px;
    クリップ: rect(0, 91px, 自動, 0);
}
.circle-bar-right {
    背景色: #e9ecef;
    幅: 182ピクセル;
    高さ: 182px;
    クリップ: rect(0, auto, auto, 91px);
    変換: 回転(118.8度);
}
。マスク {
    幅: 140ピクセル;
    高さ: 140px;
    背景色: #fff;
    テキスト配置: 中央;
    行の高さ: 0.2em;
    色: rgba(0, 0, 0, 0.5);
    位置: 絶対;
    左: 21px;
    上: 21px;
}
.マスク > スパン {
    表示: ブロック;
    フォントサイズ: 44px;
    行の高さ: 150px;
}
/*すべての子孫は水平方向と垂直方向に中央に配置され、同心円になります*/
.circle-bar * {
    位置: 絶対;
    上: 0;
    右: 0;
    下部: 0;
    左: 0;
    マージン: 自動;
}
/*要素自体とそのサブ要素は両方とも円です*/
.circle-bar、
.circle-bar > * {
    境界線の半径: 50%;
}

これで、CSS で円形グラデーションプログレスバー効果を実装するサンプルコードに関するこの記事は終了です。CSS グラデーションプログレスバーのコンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL UPDATE ステートメントの「典型的な」落とし穴

>>: ブラウザの自動フォーム入力によるウェブページのスタイル損失の原因の分析と解決