絵文字でローディングアイコン “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 ファイルを直接みてね。

view raw

index.html

hosted with ❤ by GitHub

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

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