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

Development,Pronama-chanCSS,Twitter

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

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

emoji loader

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

使い方


<div class="loader"></div>
<script>
$(".loader").html(twemoji.parse('🍣'));
</script>

view raw

index.html

hosted with ❤ by GitHub

回転させる CSS

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


.loader {
display: inline-block;
width: 36px;
height: 36px;
animation: spin 1s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

view raw

spin.css

hosted with ❤ by GitHub

The following two tabs change content below.
Twitter のプロフィールMy YouTube channel

kei

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

Development,Pronama-chanCSS,Twitter

Posted by kei