CSS円形プログレスバー生成ツール
SVGの円形プログレスバーを色やサイズまで調整してコードを出力
進捗率、サイズ、線の太さ、色、アニメーション速度をスライダーで調整しながら円形プログレスバーをリアルタイムでプレビューし、SVG・CSSコードをそのままコピーできるツールです。ダッシュボードやローディング表示、統計カードなどに使う円形ゲージをデザインしたいエンジニア・デザイナーに便利で、計算もプレビューもすべてブラウザ内だけで行われ、サーバーには何も送信されません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- スライダーで進捗率（%）、線の太さ、円のサイズを好みの値に調整します。
- 進捗の色、背景（トラック）の色、テキストの色をカラーピッカーまたはコード入力で指定します。
- 中央のテキストを表示するかどうか、トランジションアニメーションの有無、アニメーション時間を設定します。
- リアルタイムプレビューで仕上がりを確認し、SVGコードまたはCSSコードをコピーしてプロジェクトに貼り付けます。
よくある質問
- 生成されたコードをReactやVueのプロジェクトにそのまま使えますか？
- はい。純粋なSVGマークアップなのでどのフレームワークにも貼り付けて使えます。JSXで使う場合は、必要に応じてstroke-widthなどの属性をキャメルケースに書き換えてください。
- 進捗率が変わるときにアニメーションは自動で再生されますか？
- トランジションアニメーションをオンにするとCSSのtransitionがstroke-dashoffsetに適用されるため、実際の画面で進捗率を動的に変更したときになめらかに満ちていく動きになります。
- 入力した値はサーバーに保存されますか？
- いいえ。計算もSVGのレンダリングもすべてブラウザ内だけで行われ、保存も送信もされません。