今回はインターネット上で画面が遷移する際以下のような読み込み中表示がよくある
spin.js が有名だが これの代用になる方法としてgifファイルを再生する方法を
紹介したいと思う
実際に実装した遷移画面は以下のリンク
https://gyazo.com/e1463a4af04661cc9a5c9853bb66f4db
遷移の最中は赤い車が走るgifファイルが再生されるようになっている
実装の方法はとてもシンプルで
①htmlに今回の遷移gifは
<div class='loadingWrap'>
<img src='/car.gif'>＊該当車の台数が多いときは１分程度かかることがあります
</div>
と記述してあるのみだ
loadingWrapクラス内にイメージタグ利用してgifファイルの保存してある場所を指定しているだけだ今回のgifファイルはpublic直下に保存してある
②続いてcssは
.loadingWrap{
width: 100%;
height: 100%;
margin-top:60px;
background: #fff;
position: fixed;
text-align:center;
top: 0;
left: 0;
}
.loadingWrap img{
position: absolute;
top: 50%;
left: 20%;
height:11%;
width:80%;
margin-top: -100px;
margin-left: -150px;
}
が記述してあるだけだ
内容の補足としてloadingWrapクラスは遷移時に全体を白く隠すためのもので
その中のimg はgifファイルの表示位置サイズを指定している
③最後にjQueryだが方法はいくつかあると思うためあくまで参考ということで
以下のような記述をした
$(document).on('turbolinks:load', function() {
$(".loadingWrap").hide();
$(document).ready(function(){
$('.btn--block').click(function(){
$(".loadingWrap").fadeIn();
})
});
$(window).load(function(){
$(".loadingWrap").fadeOut();
});
});
ボタンが押されると発火するように記述した
以上遷移画面を表示できるようになるはずだ！
参考になれば幸いです
※内容はjQueryを使えるようにする設定などは省いてます
