記号や特殊文字を使ったローディング時のスピナーをCSSで作る・「text-spinners」

Ads

text-spinners


text-spinnersは記号や特殊文字を使ってCSSで作るスピナーです。上例は分かりやすくするために大きなフォントで表示しています。contentプロパティに複数テキストを設定してkeyframesで動かす、というもの。例えば上例のメニューアイコンならcontent: "☱\A☲\A☴";と書いてます。動きがぎこちないですが応用も出来るしスタイリングも容易でJSも使わないので悪くない気がします。尚、16進数値文字参照にはなっていませんので、(例えば◵なら\0025f5というように)、気になる場合は変更する必要があります。

text-spinners