パーツ番号 09-10-11 ・ CSSのみ

角丸スクエア枠プログレス(固定値)

角丸四角形の縁取りで進捗を表現する静止インジケーターです。円形とは異なる印象のスコア表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="stwrap">
          <div class="stroke09-10-11">
            <svg viewBox="0 0 100 100" width="120" height="120">
              <rect x="10" y="10" width="80" height="80" rx="18" fill="none" stroke="#e5e7eb" stroke-width="8"/>
              <rect x="10" y="10" width="80" height="80" rx="18" fill="none" stroke="#22c55e" stroke-width="8"
                stroke-dasharray="298" stroke-dashoffset="65" stroke-linecap="round"/>
            </svg>
            <div class="stval">78<span>%</span></div>
          </div>
        </div>

CSS

.d09-10-11 .stwrap{text-align:center}
        .d09-10-11 .stroke09-10-11{position:relative;display:inline-block}
        .d09-10-11 svg{display:block}
        .d09-10-11 .stval{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;font-weight:700;color:#1e293b}
        .d09-10-11 .stval span{font-size:12px;color:#94a3b8;margin-left:1px}

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