おしゃれなサイトはローディングをよく実装していますので、今回はポートフォリオにて実装してみました。
思ったよりかんたんに実装できて、サイト全体の雰囲気がアップするのでおすすめです！
参考にしたサイトは以下で、「1.【サンプル】ローディング（テキストだけでふわっと）」をRailsのアプリケーションに落とし込んで解説していきます。
【jQuery】 ローディング、実装サンプル集
開発環境
ruby 2.6.3
Rails 5.2.6
実装方法
今回はHTMl,CSS,JavaScriptを使ってローディングを実装していきます。
ではいってみましょう〜！
ビュー
まずはビューから、このビューのid名、class名に対してCSSやJavaScriptをあてていきます。
今回はhomes/topで実装。
1番上の行から記述していってください。
<div id="loading">
<div id="loading_box">
<div class="loading-one animation_loading">
<p class="loading-txt">Loading</p>
</div>
</div>
</div>
:
デザイン
次にローディングのデザインとアニメーションに関する記述をしていきます！
// loading
// デザイン
#loading {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 99999;
width: 100%;
height: 100%;
background: #343a40;
}
#loading_box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.loading-one {
display: inline-block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.loading-one p.loading-txt {
color: #fff;
font-size: 20px;
letter-spacing: 0.25em;
line-height: 2.0;
padding: 2em 0;
}
// アニメーション
.animation_loading {
animation: equalizer_loading 7000ms infinite;
animation-iteration-count: 10;
}
@keyframes equalizer_loading {
0% {
width: 70%;
}
10% {
width: 50%;
}
20% {
width: 100%;
}
30% {
width: 10%;
}
40% {
width: 50%;
}
50% {
width: 70%;
}
60% {
width: 50%;
}
70% {
width: 10%;
}
80% {
width: 100%;
}
90% {
width: 10%;
}
100% {
width: 70%;
}
}
動きをつける
デザインもできたので、最後にJavaScriptで動きをつけていきます。
//ローディング画面の表示
$(window).on('load',function(){
$("#loading").delay(1500).fadeOut('slow');//ローディング画面を1.5秒（1500ms）待機してからフェードアウト
$("#loading_box").delay(1200).fadeOut('slow');//ローディングテキストを1.2秒（1200ms）待機してからフェードアウト
});
ここで一度動作を確認してみてください。
リロードやURL直打ちなら正常に動作すると思いますが、Topビューへのリンクを踏んだときはローディングが一生終わりません。(コピペのままではだめってこと）
そう！
RailsにはTurbolinksがデフォルトで入っているので正常に動きません。
詳しくは以下記事
[Rails]リロードしないとJavaScript(jQuery)が動かない問題
Turbolinksを無効化するために、Topビューへのリンクに以下を追加します。（複数Topビューへのリンクがある場合は１つ残らず忘れずに）
<% if user_signed_in? %>
<!--data: {"turbolinks" => false}を追加-->
<%= link_to 'Top', root_path, data: {"turbolinks" => false} %>
:
<% else %>
<!--data: {"turbolinks" => false}を追加-->
<%= link_to 'Top', root_path, data: {"turbolinks" => false} %>
:
<% end %>
これでリンクを踏んだ場合にも正常に動作します。
最後に
今回はローディングを参考サイトを参考にしながらかんたんに実装していきました。
ほぼほぼ参考サイトそのままでできたのですが、Turbolinksのところでそのまま動かなかったりしました。
ぼく自身まだまだCSSのアニメーションの記述に関しては調べながらの実装も多いので、カスタマイズできたり、がんばって一からコードが書けるよう学習していきます。