CSSでできる簡単な読込中のぐるぐるの比較

CSSで読込中のぐるぐるを作成

CSSのanimationプロパティで読込中のぐるぐるを作ってみました。
こんな感じで記述できます。

See the Pen Untitled by 8787kazuye (@8787kazuye) on CodePen.

それぞれの設定はCSSのコメントに書いてある通りです。
ChatGPTにお願いしたらささっと作ってくれました。

ぐるぐるの比較

ぐるぐるをいろいろ作って比較してみました。主にspinのタイミング関数を変更した比較です。少し自分でコードを書いた後に、同じ感じで増やしてくれ、とChatGPTに頼んだら、これもささっとやってくれました。(3行目とbounceはspinではないですが)

See the Pen 読込中のぐるぐる by 8787kazuye (@8787kazuye) on CodePen.

ぐるぐるをつくるときの参考にしてください。
私はease-in-outがお気に入りです。