ローディングイメージに横並びの円が徐々に点滅する方法です。
ソースコード
円を作る
htmlとcss（sass）で円を作ります。
circle.html
<ul>
<li class="circle-1"></li>
<li class="circle-2"></li>
<li class="circle-3"></li>
<li class="circle-4"></li>
<li class="circle-5"></li>
</ul>
circle.sass
ul
text-align: center
li
background-color: green
border-radius: 50%
display: inline-block
margin: 5px
width: 15px
height: 15px
jqueryを書く
jsに下記の記述をしてオブジェクトの点滅します。円のフェードイン、フェードアウト、インターバルが1秒（1000ミリ秒）の設定です。
blink.js
$(function () {
var fadeoutTimer = 1000; // フェードアウト
var fadeinTimer = 1000; // フェードイン
var interval = 1000; // インターバル
setTimeout(function () {
$('.circle-1').fadeOut(fadeoutTimer, function () {
$(this).fadeIn(fadeinTimer)
});
}, 0);
setTimeout(function () {
$('.circle-2').fadeOut(fadeoutTimer, function () {
$(this).fadeIn(fadeinTimer)
});
}, interval*1);
setTimeout(function () {
$('.circle-3').fadeOut(fadeoutTimer, function () {
$(this).fadeIn(fadeinTimer)
});
}, interval*2);
setTimeout(function () {
$('.circle-4').fadeOut(fadeoutTimer, function () {
$(this).fadeIn(fadeinTimer)
});
}, interval*3);
setTimeout(function () {
$('.circle-5').fadeOut(fadeoutTimer, function () {
$(this).fadeIn(fadeinTimer)
});
}, interval*4);
setInterval(function () {
setTimeout(function () {
$('.circle-1').fadeOut(fadeoutTimer, function () {
$(this).fadeIn(fadeinTimer)
});
}, 0);
setTimeout(function () {
$('.circle-2').fadeOut(fadeoutTimer, function () {
$(this).fadeIn(fadeinTimer)
});
}, interval*1);
setTimeout(function () {
$('.circle-3').fadeOut(fadeoutTimer, function () {
$(this).fadeIn(fadeinTimer)
});
}, interval*2);
setTimeout(function () {
$('.circle-4').fadeOut(fadeoutTimer, function () {
$(this).fadeIn(fadeinTimer)
});
}, interval*3);
setTimeout(function () {
$('.circle-5').fadeOut(fadeoutTimer, function () {
$(this).fadeIn(fadeinTimer)
});
}, interval*4);
}, interval*5);
});
これでローディングイメージができます。
解説
プロパティ
| プロパティ | 説明 |
|---|---|
| setTimeout | 設定した時間後に、イベントを発生させる |
| setInterval | 設定した時間ごとに、イベントを繰り返す |
| fadeIn | フェードイン |
| fadeOut | フェードアウト |