パーツ番号 04-12-05 ・ CSSのみ

円形(サーキュラー)スライダー

円形のリングでパーセンテージを表す静止スライダーです。ダッシュボードの進捗表示や設定値プレビューに活用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-12-05-circle">
          <div class="d04-12-05-dial"><span class="d04-12-05-dot"></span></div>
          <div class="d04-12-05-center"><span class="d04-12-05-val">70%</span></div>
        </div>

CSS

.d04-12-05{align-items:center;justify-content:center}
        .d04-12-05-circle{position:relative;width:120px;height:120px;border-radius:50%;background:conic-gradient(#6366f1 0% 70%,#e5e7eb 70% 100%)}
        .d04-12-05-dial{position:absolute;inset:0;transform:rotate(252deg)}
        .d04-12-05-dot{position:absolute;top:2px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:3px solid #6366f1;box-shadow:0 1px 3px rgba(0,0,0,.3)}
        .d04-12-05-center{position:absolute;left:14px;top:14px;right:14px;bottom:14px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
        .d04-12-05-val{font-size:16px;font-weight:800;color:#111827}

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