CSS Spriteで読み込み中アニメ

OS X 以来近年の Apple のサービスによく登場している「読み込み中」の表現は、10年前ならアニメーションGIFで対応したと思うのですが最近では CSS Sprite の技術を利用することが可能になりました。

(function($) {
	var initData = (function() {
		const imgW = 35;
		const imgNum = 12;
		var intid_loader = 0;
		var intval_loader = 50;
		var posY = 0;
		var imgId = 0;
		intid_loader = setInterval(function(){
			imgId = imgId >= imgNum ? 0 : imgId;
			var pos = '0px ' + (-imgW * imgId) + 'px';
			$('#loading').css('background-position', pos);
			imgId++;
			//console.log(pos);
		}, intval_loader);
	}).call(this);
})(jQuery);

この例では、35ピクセルの正方形を12駒分、縦方向であるY座標を上方へ100ミリ秒ずつ動かしています。このブログの先頭ページに設置したのでご参考まで。

ところがこのタイマーによって繰り返す手法も代替の時期にきていて、実際に繰り返し関数をアニメーションのフレームに使うことに比べると正しい姿だと思うのですが、既に jQuery と requestAnimationFrame の採用問題などあり、更に向こう10年間のブラウザの対応など注意して追いかけていく必要があります。


今回のネタ元でした。

P.S. 画像処理でもいいよね… loading – Google 検索

参考: