今日の人気記事

まだデータがありません。

自在にカスタマイズできるローディング・アニメを実装「swirly」

当ページのリンクには広告が含まれています。

スポンサーリンク

自在にカスタマイズできるローディング・アニメを実装するプラグイン「swirly」を紹介します。

jQueryプラグイン「swirly」

このプラグインを使えば、2つの「丸いの」がくるくると回るローディング・アニメーションを作成することができます。

オプションでは、この「丸いの」のサイズや動き(角度・スタート位置……など)を指定することができます。

データベースからデータを引っ張る場合などに便利なプラグインですね。

スポンサーリンク

それでは、デモページの「丸いの」をご覧ください。

「swirly」のデモ

ソース( 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>
スポンサーリンク

関連記事(一部広告含む)