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

<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%;
}