バリエーションも豊富、アニメーションでくるくる回るローダーを簡単に作成できるオンラインサービス -CanvasLoader Creator
Post on:2011年7月19日
sponsors
サイズ・カラー・形状などが簡単にカスタマイズできる、HTML5 Canvas製のローダーを作成できるオンラインサービスを紹介します。
[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]
sponsors
