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

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

こういう loader 思い付いたんだけど、どうかな？ http://t.co/zdYDsaXYBL pic.twitter.com/sS9naUob18

— プロ生ちゃん（暮井 慧）🍍 (@pronama) February 11, 2015

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

emoji loader

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

使い方

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

回転させる 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);
    }
}