絵文字でローディングアイコン “emoji loader”

慧: こんにちは! 以前ツイートしたものを記事にしておくよ。

Twitter 絵文字をそのままくるくる回る Ajax とかの loader (spinner) にしてみるとおもしろいかも? っていうアイデア。絵文字は twemoji を使ってるよ。

emoji loader

デモ ここ。コードは GitHub の css と html ファイルを直接みてね。

使い方

回転させる CSS

CSS の記述はこういう感じ。loader class の要素を1秒で1回転。実際には、animation や @keyframes には、ベンダープレフィックスがいろいろ必要だよ。

kei

都内の公立高校に通う高校生。部活は、情報処理研究会。身体を動かすのも好きで、気が向いたときはなぜか体育会系の部活に混ぜてもらっていろんなスポーツをすることも。プログラミング生放送のキャラクターとして活動中!