📊 SVGプログレスバージェネレーター

線形/円形プログレスバーのSVG生成。値・色・アニメーション設定、SVGダウンロード可能

現在値: 65

最大値

バーの色

背景色

アニメーション有効ラベル表示

SVG コード

<svg width="400" height="40" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect x="0" y="0" width="400" height="40" fill="#e5e7eb" rx="20"/>

  <!-- Progress bar -->
  <rect x="0" y="0" width="260" height="40" fill="#3b82f6" rx="20">
    <animate attributeName="width" from="0" to="260" dur="1s" fill="freeze"/>
  </rect>

  <!-- Label -->
  <text x="200" y="26" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#000" text-anchor="middle">
    65/100 (65%)
  </text>
</svg>