今日の人気記事

  1. 検索/ソート/ページャー/フィルター付きのテーブル「Bootgrid」
  2. 日付と時間の入力を補助する「DateTimePicker」
  3. 新着記事やお知らせを流すニュースティッカーを実装「webTicker」 - jQueryプラグイン
  4. クリックで開閉!ドロップダウン・サイドメニュー「Tendina」
  5. 右クリックでメニューを表示「chromeContext」

ローディング・アニメーションを実装「Easy Loading」

スポンサーリンク

ローディング・アニメーションを実装するプラグイン「Easy Loading」を紹介します。

jQueryプラグイン「Easy Loading」

このプラグインを使えば、データ読み込み中などに使えるローディング・アニメーションを実装することができます。

このプラグインだけでさまざまな効果を実装することができるので、ちょっと重たいデータベースを使ったWebサイトなんかに重宝するプラグインですね。

スポンサーリンク

デモページのローディング・アニメーションをご覧ください。

「Easy Loading」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Easy Loading のデモでーす。">
<title>Easy Loading - jQueryプラグイン</title>
<link href="css/jquery.loading.css" rel="stylesheet">
<style>
body{
  background-color: #aaa;  
}
div {
  height: 500px;
}
</style>
</head>
<body>
<div id="loading-toggle" class="loading-div">
  <h1>Easy Loading のデモでーす。</h1>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.loading.js"></script>
<script>
setInterval(function() {
  $('#loading-toggle').loading('toggle');
}, 2000);
</script>
</body>
</html>
スポンサーリンク

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