今日の人気記事

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

データ読み込み中をアニメーションで演出!「Is Loading」

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

スポンサーリンク

データを読み込んでいる最中のアニメーションを演出してくれるjQueryプラグイン「Is Loading」を紹介します。

jQueryプラグイン「Is Loading」

jQueryプラグイン「Is Loading」は、データを読み込んでいる最中などに利用できるアニメーションが簡単に作成できるプラグインです。

くるくる矢印がまわるアニメーションがデータ読み込み中を演出してくれます。

スポンサーリンク

デモページにある「ボタン」を押してみてください。データの読み込み(実際には読み込んでいません)がはじまります。

「Is Loading」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>isLoading - jQueryプラグインまとめのカルマ</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div class="container wrapper">
	<h1>isLoadingのデモでーす。</h1>
</div>
<div class="container wrapper" style="position: relative;">
<div id="basic">
<div class="demo well">
<p class="alert">「ボタン」を押すと、読み込み開始だよ。</p>
<span class="btn">ボタン</span>
</div>
<script>
$(function() {
  $( "#basic .btn" ).click(function() {
    $( this ).isLoading();
    $( "#basic .demo p" ).removeClass("alert-success");
    setTimeout( function(){
      $( "#basic .btn" ).isLoading( "hide" );
      $( "#basic .demo p" ).html( "読み込み完了!" )
      addClass("alert-success"); 
    }, 1000 );
  });
});
</script>
<script src="js/jquery.isloading.js" type="text/javascript"></script>
</body>
</html>
スポンサーリンク

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