絵文字でローディングアイコン “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 ファイルを直接みてね。
使い方
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="loader"></div> | |
<script> | |
$(".loader").html(twemoji.parse('🍣')); | |
</script> |
回転させる CSS
CSS の記述はこういう感じ。loader class の要素を1秒で1回転。実際には、animation や @keyframes には、ベンダープレフィックスがいろいろ必要だよ。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.loader { | |
display: inline-block; | |
width: 36px; | |
height: 36px; | |
animation: spin 1s infinite linear; | |
} | |
@keyframes spin { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(360deg); | |
} | |
} |
最新記事 by kei (全て見る)
- プロ生ちゃんチョコプログラミングコンテスト2023作品! - 2023/02/16
- プロ生ちゃんチョコプログラミングコンテスト2023開催! - 2023/02/09
- 2023年 - 2023/01/01