データ読み込み中をアニメーションで演出！「Is Loading」
当ページのリンクには広告が含まれています。
スポンサーリンク
データを読み込んでいる最中のアニメーションを演出してくれるjQueryプラグイン「Is Loading」を紹介します。
jQueryプラグイン「Is Loading」
jQueryプラグイン「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>
スポンサーリンク