パーツ番号 11-07-06 ・ CSSのみ

進捗ゲージ付きセットアップ画面(固定値)

セットアップの完了度合いを円弧ゲージで表示する画面。数値は70%固定で表示するステータス確認用の見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-07-06-wrap">
          <svg class="d11-07-06-gauge" viewBox="0 0 120 70" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 60a50 50 0 0 1 100 0" fill="none" stroke="#e5e7eb" stroke-width="10" stroke-linecap="round"/>
            <path d="M10 60a50 50 0 0 1 100 0" fill="none" stroke="#f59e0b" stroke-width="10" stroke-linecap="round" stroke-dasharray="157" stroke-dashoffset="47"/>
          </svg>
          <p class="d11-07-06-num">70%</p>
          <p class="d11-07-06-cap">セットアップ完了度</p>
        </div>

CSS

.d11-07-06-wrap{ text-align:center; }
        .d11-07-06-gauge{ width:130px; height:auto; }
        .d11-07-06-num{ margin:-6px 0 0; font-size:20px; font-weight:800; color:#b45309; }
        .d11-07-06-cap{ margin:2px 0 0; font-size:11px; color:#78716c; }

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