DevToolBox

SVG プログレスリング ジェネレーター

円形プログレスバーのSVGコードを生成します。サイズ、太さ、色、進捗率をカスタマイズできます。

設定

プレビュー

/> 65%

SVGコード

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- Background circle -->
  <circle
    cx="100"
    cy="100"
    r="90"
    fill="none"
    stroke="#e0e0e0"
    stroke-width="20"
  />
  <!-- Progress circle -->
  <circle
    cx="100"
    cy="100"
    r="90"
    fill="none"
    stroke="#4caf50"
    stroke-width="20"
    stroke-dasharray="565.4866776461628"
    stroke-dashoffset="197.92033717615698"
    stroke-linecap="round"
    transform="rotate(-90 100 100)"
    <animate attributeName="stroke-dashoffset" from="565.4866776461628" to="197.92033717615698" dur="1s" fill="freeze" />
  />
  <!-- Percentage text -->
  <text
    x="100"
    y="100"
    text-anchor="middle"
    dy=".3em"
    font-size="40"
    font-weight="bold"
    fill="#4caf50"
  >
    65%
  </text>
</svg>

使い方

  • • stroke-dasharray と stroke-dashoffset で進捗を表現
  • • transform rotate で12時の位置から開始
  • • アニメーション機能で滑らかな進捗表示が可能
  • • 全ブラウザで動作する純粋なSVG（JavaScriptなし）
  • • ダッシュボード、読み込み画面、統計表示などに最適