【js】いろいろ駆使してローディングを作ってみた

デモページ

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

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

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

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

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

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

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

easingなど動きについて

easingの種類

アニメーションの種類

拡大について

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

プログレスバーについて