SVGで円をアニメーションさせたい時のMEMO - Qiita

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-w