バリエーションも豊富、アニメーションでくるくる回るローダーを簡単に作成できるオンラインサービス -CanvasLoader Creator

ウェブサービス

Post on:2011年7月19日

sponsorsr

サイズ・カラー・形状などが簡単にカスタマイズできる、HTML5 Canvas製のローダーを作成できるオンラインサービスを紹介します。

CanvasLoader Creator

[ad#ad-2]

CanvasLoader Creatorの使い方は簡単で、右側の「Customizer」の値を変更するだけで、さまざまなタイプのローダーを作成できます。

キャプチャだと分かりにくいので、少し大きめにしていくつか作成してみました。

形状：Circle、Scaling：True

形状：Rounded Rectangle、Scaling：True

生成したローダーは「Download」ボタンをクリックすると、HTMLファイルをダウンロードできます。

「形状：Circle、Scaling：True」のコードは下記のようになります。

HTML

L.9の「heartcode-canvasloader-min.js」とL.26-34のスクリプトがローダーの箇所になります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Heartcode CanvasLoader example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="en" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<script type="text/javascript" src="http://heartcode-canvasloader.googlecode.com/files/heartcode-canvasloader-min.js"></script>
	<style type="text/css">
		body, html {
			margin:0;
			padding:0;
			overflow:hidden;
		}
		.wrapper {
			position:absolute;
			top:50%;
			left:50%;
		}
	</style>
</head>
<body>
	<div id="canvasloader-container" class="wrapper"></div>
		<script type="text/javascript">
var cl = new CanvasLoader('canvasloader-container');
cl.setDiameter(431); //default is 40
cl.setScaling(true); //default is false
cl.setColor('#29679e'); //default is '#000000'
		
			var loaderObj = document.getElementById("CanvasLoader");
			loaderObj.style.position = "absolute";
			loaderObj.style["margin-top"] = loaderObj.height*-.5 + "px";
			loaderObj.style["margin-left"] = loaderObj.width * -.5 + "px";
		
		</script>
</body>
</html>

[ad#ad-2]