デモページ

↑こんな感じのローディングイメージを作るのに四苦八苦したので備忘録的に書きます。

いろいろな動きが重なっているので、複数の処理を順番にやっていけばいいかなと思って、$when().done“Velocity.js”を使ってなんとかしました。

Velocity.jsの使い方！かなり参考！

【jQuery】順番に処理を実行する .when() と .done() の使い方

animetionを順番に処理するメソッド

jQueryで複数のアニメーションを順番に実行する方法

Velocity.jsで拡大の動きをなめらかにするために搭載

これがないとsvgでも拡大するときギザギザしちゃう

さらばjQuery！アニメーションをサクサク処理できるVelocity.jsの使い方

https://liginc.co.jp/web/js/jquery/150136

easingなど動きについて

easingの種類

アニメーションの種類

拡大について

jQueryで要素を移動・回転・拡大・傾斜アニメーションさせる方法

実際使わなかったけど参考にしたもの

ズーム可能なSVGを実装する方法の解説
animate(jQuery)の使い方まとめ
jQueryのanimate関数で要素を動かす！

プログレスバーについて