ローディングのくるくる

ローディングのくるくる

上のアイコンはサンプルとして表示しているだけなので、待っていても何も起こりませんけれど、一眼（ひ...概要を表示 上のアイコンはサンプルとして表示しているだけなので、待っていても何も起こりませんけれど、一眼（ひとめ）でいかにも読み込み中だとわかるし、待たなきゃとさえ思わせてくるアイコンですよね;)。そんな、ローディング中を代表するくるくる動くアイコンの作り方のメモです。 仕組み ローディングの動きは、いっぺんにやろうとするとこんがらがっちゃうので、「くるくる回る動き」と、「伸び縮みする動き」に分けて考えるとわかり良いです:)。 ＋ くるくる回る動き＋伸び縮みする動き 伸び縮みする動きを、円じゃなくて、直線に適用してみると下サンプルのようになっています。線の上にカーソルを乗せると（タップすると）仕組みが見えます。 線が伸び縮みしているように見えるけれど、実は伸びても縮んでもなくて、同じ長さの線が左から右へ通り過ぎてるだけなんですね:D。 伸び縮みする動き 作り方 くるくる動くアイコンは、SVGとCSSを

• css