自在にカスタマイズできるローディング・アニメを実装「swirly」
当ページのリンクには広告が含まれています。
スポンサーリンク
自在にカスタマイズできるローディング・アニメを実装するプラグイン「swirly」を紹介します。
jQueryプラグイン「swirly」
このプラグインを使えば、2つの「丸いの」がくるくると回るローディング・アニメーションを作成することができます。
オプションでは、この「丸いの」のサイズや動き（角度・スタート位置……など）を指定することができます。
データベースからデータを引っ張る場合などに便利なプラグインですね。
スポンサーリンク
それでは、デモページの「丸いの」をご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="swirly のデモでーす。">
<title>swirly - jQueryプラグイン</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script src="swirly.js" ></script>
<script>
$(function(){
interval = $("#demo").swirly({
colors:["red","blue"],
initialX:65,
initialY:65
});
});
</script>
<style>
.swirly-box{
background-color: #333;
width: 180px;
height: 180px;
}
</style>
</head>
<body>
<h1>swirly のデモでーす</h1>
<div class="swirly-box">
<div id="demo"></div>
</div>
</body>
</html>
スポンサーリンク