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

目標達成率を示すサーモメーター型ファネル

温度計のような縦型ゲージで目標に対する到達度を表した静止見本です。月間目標の進捗を視覚的に見せたい社内ダッシュボードや実績紹介ページに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-15-12-wrap">
          <span class="d05-15-12-goal">目標 100%</span>
          <div class="d05-15-12-therm">
            <div class="d05-15-12-track">
              <div class="d05-15-12-fill"></div>
            </div>
            <div class="d05-15-12-bulb"><span>76%</span></div>
          </div>
          <span class="d05-15-12-label">目標達成率</span>
        </div>

CSS

.d05-15-12{padding:16px}
        .d05-15-12-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
        .d05-15-12-goal{font-size:10.5px;color:#94a3b8;font-weight:700}
        .d05-15-12-therm{display:flex;flex-direction:column;align-items:center}
        .d05-15-12-track{position:relative;width:26px;height:150px;border-radius:13px;background:#fef3c7;box-shadow:inset 0 0 0 1px #fde68a;overflow:hidden}
        .d05-15-12-fill{position:absolute;left:0;right:0;bottom:0;height:76%;background:linear-gradient(to top,#dc2626,#f97316)}
        .d05-15-12-bulb{margin-top:-14px;width:52px;height:52px;border-radius:50%;background:#dc2626;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;box-shadow:0 0 0 4px #fef3c7}
        .d05-15-12-label{font-size:11px;color:#64748b;font-weight:700}

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