パーツ番号 06-10-06 ・ CSSのみ

円形プログレスリング(静止表示)

conic-gradientで特定の進捗割合を静止表示するリング型インジケーター。長文記事の読了目安の見た目サンプルに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap06-10-06">
          <div class="ring06-10-06"><div class="hole06-10-06"><span class="pct06-10-06">60%</span></div></div>
          <div class="info06-10-06">
            <p class="ti06-10-06">読了進捗</p>
            <p class="ds06-10-06">残り約3分で読み終わります</p>
          </div>
        </div>

CSS

.d06-10-06{width:100%;}
        .d06-10-06 .wrap06-10-06{display:flex;align-items:center;gap:18px;}
        .d06-10-06 .ring06-10-06{position:relative;width:88px;height:88px;border-radius:50%;flex-shrink:0;background:conic-gradient(#4a6fd8 0% 60%,#e6e9f2 60% 100%);}
        .d06-10-06 .hole06-10-06{position:absolute;top:9px;left:9px;right:9px;bottom:9px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;}
        .d06-10-06 .pct06-10-06{font-size:15px;font-weight:bold;color:#2c3e6b;}
        .d06-10-06 .info06-10-06{display:flex;flex-direction:column;gap:5px;}
        .d06-10-06 .ti06-10-06{margin:0;font-size:12.5px;font-weight:bold;color:#222;}
        .d06-10-06 .ds06-10-06{margin:0;font-size:10.5px;color:#888;}

クラス名 .d06-10-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。