<div class="container">
	<canvas id="loading" width="200" height="200">お使いのブラウザはcanvasに対応しておりません。</canvas>
</div>
body {
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}
a {
	text-decoration: none;
	color: #333;
}
img {
	vertical-align: bottom;
}
.clearfix {
	display: table;
	clear: both;
}
.container {
	width: 200px;
	margin: 0 auto;
	padding: 50px 0;
	background: #fff;
}
(function() {
	'use strict';
	
	var canvas,
			ctx;
	
	// canvas要素の取得
	canvas = document.getElementById('loading');
	
	// ブラウザがcanvasに対応していなければ実行しない。また、<canvas>タグ内のテキストを表示
	if (!canvas || !canvas.getContext) {
		return false;
	}	

	// canvasに描画するためのAPIにアクセス
	ctx = canvas.getContext('2d');
	
	// 角度やcanvas要素の幅高さの変数を定義
	var radian,
			w,
			h;
	radian = 0;
	w = canvas.width;
	h = canvas.height;
	
	
	function draw() {
		var pos,
				r;
		pos = 30;
		r = 4;
		
		// 描画状態を保存
		ctx.save();
		
		ctx.beginPath();
		ctx.strokeStyle = '#000000';
		ctx.strokeRect(0, 0, w, h);
		
		// 円運動の中心位置
		ctx.translate(w / 2, h / 2);
		
		// 円を描画
		ctx.beginPath();
		ctx.fillStyle = '#000000';
		ctx.arc(pos * Math.cos(Math.PI / 180 * radian), pos * Math.sin(Math.PI / 180 * radian), r, 0, Math.PI * 2, false);
		ctx.fill();
		
		// save()で保存した描画情報を復元
		ctx.restore();
	}
	
	// アニメーション関数
	function update() {
		ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';

		// 上記スタイルを使用して塗りつぶす
		ctx.fillRect(0, 0, w, h);
		draw();
		radian += 24;
		setTimeout(function() {
			update();
		}, 50);
	}
	update();
	
}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.