円形プログレスローダー
円周に沿って弧が伸び縮みしながら回転する、SVG の円形プログレスローダーです。仕掛けは stroke-dasharray と stroke-dashoffset という線の破線制御を使ったもので、円の全周（このサンプルでは約 163）を 1 本の破線として扱い、 dashoffset をアニメーションさせることで…
解説
円周に沿って弧が伸び縮みしながら回転する、SVG の円形プログレスローダーです。仕掛けは stroke-dasharray と stroke-dashoffset という線の破線制御を使ったもので、円の全周（このサンプルでは約 163）を 1 本の破線として扱い、dashoffset をアニメーションさせることで「見えている弧の長さ」を変えています。前半で 163 から 0 へ動かして弧を満たし、後半で -163 まで進めて弧を消すと、伸びて縮む動きが生まれます。SVG 全体を rotate(-90deg) で傾けているので、起点が時計の 12 時になります。
向いている場面
- ファイル読み込みやデータ取得中のスピナー
- ダッシュボードやアプリの汎用的な処理中表示
- 背景に薄い円を残すことで「残り」を感じさせる演出
色はバー側 pc__bar の stroke、太さは stroke-width、大きさは .pc の幅と高さで調整します。stroke-linecap: round で弧の先端が丸くなります。注意したいのは、これは見た目の演出ループで、実際の進捗率とは連動していない点です。本物の割合を表示したい場合は JavaScript で dashoffset を実データに応じて計算します。常時回転するため prefers-reduced-motion での停止配慮も忘れずに。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
実際の進捗率（◯%）に連動させられますか？
このサンプルは見た目だけのループです。本物の割合を出すには、円周の長さ（約 163）に対し、残り割合ぶんだけ dashoffset を計算して JavaScript で設定します。たとえば 70% 完了なら、全周の 30% 相当を offset に与えると、その位置で弧が止まります。
線を太くしたり色を変えたりできますか？
背景円とバーの両方に指定している stroke-width を変えれば太さが変わります。色はバー側の pc__bar の stroke を、背景の薄い円は pc__bg の stroke を編集してください。サイズ自体は外側の svg の幅と高さで調整します。