ローディングバーや円グラフを表示したい時など、
くるっと回る円のアニメーションを作りたい時があります。

http://codepen.io/melo15/pen/yJmVEJ

実装方法

下記のように実装すると良いです。

<svg width="124" height="124">
  <circle cx="62" cy="62" r="60" />
</svg>

svg {
  transform: rotate(-90deg);
}

circle {
  fill: transparent;
  stroke: #4fa8df;
  stroke-width: 4;
  animation: circle 1s infinite;
}

@keyframes circle {
  0% {
    stroke-dasharray: 0 377;
  }
  99.9%,
  to {
    stroke-dasharray: 377 377;
  }
}

対応ブラウザ

インライン SVG なので、モダンブラウザは対応していて、
IE8 以下、Android2 系以下辺りは使えなさそうです。
http://caniuse.com/#feat=svg-html5

実装方法

半径 60px の円を作りたいとすると、
<svg>のwidthとheightには、60px x 2 = 120px
これに、のちのち設定する円の外側の線幅(stroke-width)の 4px を足して、124px を設定します。
<circle>のcxとcyには、124px の半分の値を設定し、円を<svg>の中央に配置します。
rは円の半径で 60px を設定しますが、この値によって後々アニメーションさせる時の値が変わってきます。

CSS では

<circle>のfillをtransparentにして塗りつぶしなしに設定します。
strokeとstroke-widthを指定して、円の外側に線を表示します。
これをanimationを使って、くるっと回るアニメーションにします。

アニメーションでは

破線を設定するstroke-dasharrayを使います。
stroke-dasharray: 破線の長さ 破線の間隔;
この破線の長さをアニメーションさせる事で、くるっと回るアニメーションとなります。

破線の間隔の値

この時、破線の間隔の値は、円周の長さを設定する必要があり、計算によって導きます。
円周の長さは直径 x 3.14で計算します。
今回は、120 x 3.14 = 376.8なので、小数点を切り上げて377としました。
あとは、破線の長さを 0 から 377 までアニメーションさせると、くるっと 1 周するアニメーションとなります。

@-webkit-keyframes circle {
  0% {
    stroke-dasharray: 0 377;
  }
  99.9%,
  to {
    stroke-dasharray: 377 377;
  }
}

1 周ではなく半分のところで止めたい場合は

半分のところで止めたい場合は、377 / 2 = 188.5などを設定すると良いです。

最後に、そのままだとアニメーションの開始点が 90 度ずれてしまうので、
<svg>にtransform: rotate(-90deg);を設定して、上からくるっと回るアニメーションにします。

同じようなアニメーションのデモも、CodePen にあったのでメモしておきます。

https://codepen.io/kyledws/pen/Gvelt/