こんにちは。
今日は今風のカッコいいローディングアニメーション（ローディングエフェクト）の作り方についての考え方とサンプルをブログに書きたいと思います。
何も言わずにサンプルをコピペすれば即導入できる仕様になっておりますので、とにかくイケてるやつ作って！と言われた可哀想な方は是非ともお役立ていただければ幸いです。そのかわり広告をワンクリックしてね。
最近のローディングアニメーションとちょっと昔のアニメーション
スマートなデザイン、カッコイイWebサイトにはカッコいいローディングアニメーションがつきものです。
クリックした途端にスルスルっと動くアニメーションに「このサイトはいいぞ！」と予感したことがある方は多いはずです。
これが面白いことに、そういう派手目な演出のローディングアニメーションって「Webサイト」独自の概念で、アプリでは見かけませんね。諸説、いろんな考えがあると思いますがUIではなくUXのサポートに近いのかなと思ったります。あとはユーザーのスクリーニングにある程度役立ったり、僕のポートフォリオサイト（2017年）では、訪れた方々へメッセージを出してみたりしました。
で、話は戻り、そういうスマートなローディングアニメーションが流行ったのはここ数年じゃないかな？と感じています。（業界は長くはないのですが…すみません。）
昔のローディングアニメーションといえばGIFアニでギアとか○がくるくるしてるだけでしたね。今ではそんなコトしてたらせっかくのデザインもコーダーのせいで台無しです。
昔のアレ
では最近のローディングアニメーションとは？僕なりの考えは次の項で。
最近のローディングアニメーションに求められるもの
- 当然のことながら、レスポンシブ
- ミニマルであること
- 今流行りのスマートなインタラクション
- 解像度をフォローする
- でも、そこだけに時間を割くのはナンセンス…
こんな感じかな、と思います。用途にもよりますが、その時点で上で挙げたGIFアニは脱落ですね。
ということで、僕はいつも、ごくごく簡単なHTMLとCSS、Javascript（今回はjQueryで書いてるけど）で構築します。
ラクでカッコいいローディングアニメーションの例
まずはサンプル。
ラクでカッコいいローディングアニメーション
zipをダウンロードする
「LOADING」という文字が点滅していて、かつ最近（2017年時点）よく見かけるマスクアニメーションがスルスルと覆いかぶさり「LOADED!読み込みが終わったぜ？準備はどうだい、ブラザー」とテキストが切り替わります。
読み込みが終わると、上下に幕が開きます。すべてHTMLとCSS、jQueryで行っています。
シンプルなHTML
やっと本題です。HTMLはこんな感じで行きましょう。
1 2 3 | <div id=“loadingAnim” class=“loadingAnim”> <i class=“loadingAnim_line”></i> </div> |
これだけあれば十分です。内容によってはdivだけでも結構です。
疑似要素を使ったイケてるCSS
CSSです。表題のように、:before :after疑似要素を使います。
今回はdivの中に更にiがあるので、2つのDOMで計4つの疑似要素が作れることになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | /******************** loading effects ********************/ .loadingAnim{ position: fixed; z–index: 100; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; text–align: center; } .loadingAnim:before, .loadingAnim:after{ line–height: 1; position: fixed; z–index: 99; right: 0; left: 0; display: block; width: 100%; height: 50%; margin–right: auto; margin–left: auto; content: ‘ ‘; transition: all .3s cubic–bezier(.785, .135, .15, .86) 0s; transition–delay: .3s; background–color: #be8a40; } .loadingAnim:before{ top: 0; } .loadingAnim:after{ bottom: 0; } .loaded .loadingAnim:before{ height: 0; –webkit–transform: translateY(–1%); –ms–transform: translateY(–1%); transform: translateY(–1%); } .loaded .loadingAnim:after{ height: 0; –webkit–transform: translateY(1%); –ms–transform: translateY(1%); transform: translateY(1%); } .loadingAnim_line{ line–height: 1; position: fixed; z–index: 100; top: 0; right: 0; bottom: 0; left: 0; display: inline–block; overflow: hidden; width: 150px; height: 1.25em; margin: auto; transition: all .3s cubic–bezier(.785, .135, .15, .86) 0s; transition–delay: .6s; text–align: center; } .loadingAnim_line:after{ position: absolute; z–index: 100; top: 0; bottom: 0; left: 0; display: block; width: 0; height: 100%; margin: auto auto auto 0; content: ‘ ‘; –webkit–animation: loadingAnim 2s ease–in–out .1s infinite normal backwards; animation: loadingAnim 2s ease–in–out .1s infinite normal backwards; background–color: #fff; will–change: transform, width; } .loadingAnim_line:before{ font–family: ‘Poppins’, sans–serif; font–size: 1.25em; font–weight: bold; font–style: normal; line–height: 1; display: block; content: ‘LOADING’; –webkit–animation: loadingAnim_text 1s ease .1s infinite alternate both; animation: loadingAnim_text 1s ease .1s infinite alternate both; letter–spacing: .5em; color: #fff; will–change: opacity; } .loaded .loadingAnim_line{ overflow: hidden; height: 0; } .loaded .loadingAnim_line:after, .loaded .loadingAnim_line:before{ –webkit–animation: none; animation: none; } .loaded .loadingAnim_line:before{ content: ‘LOADED!’; } |
SassでコンパイルしたCSSをペタッと貼っているため少し長くなってしまいましたが、順に説明いたします。
アニメーション全体の親要素.loadingAnim
まずは「.loadingAnim」がアニメーション全体を内包する親要素ですので、画面全体を覆うようにします。デモでは背景色が付いていますが、今回はロード後に上下にパッと開くような動きにしたいので、.loadingAnimに直接指定はしません。この開く動きは.loadingAnim:before .loadingAnim:afterの疑似要素で行います。
テキストを表示している.loadingAnim_line
次に、テキストを表示する領域のCSSです。しかし直接テキストを書いているわけではありません。
.loadingAnim_lineの:beforeのcontentプロパティに「LOADING」と表示するように書いています。後にjQueryでテキスト操作せずともCSSのみで内容を入れ替えることができるためです。
ただ、これだけだと、背景の上に「LOADING」と書いてあるだけになってしまい、待たされているユーザーは不安になってしまいます。
なので、.loadingAnim_line:beforeと、.loadingAnim_line:afterにアニメーションを設定します。（設定は後述）
なんとなく進んでる気がしませんか？
要素に動きがあるだけで、ローディングが進んでいる印象を与えることに成功しました。
最後に、「.loaded」と書いてあるところがあります。
これは、読み込みが終わったあとの処理をするためにjQueryで「.loading」クラスをつけるので、そのときに動きです。
.loadingAnim_line:before、.loadingAnim_line:afterのアニメーションはとまり、.loadingAnim:beforeと.loadingAnim:afterが上下に移動します。そして、「LOADING」が「LOADED!」に変わる指示が書いてあります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | /******************** animation setting ********************/ @–webkit–keyframes loadingAnim{ 0%{ width: 0; } 100%{ width: 100%; –webkit–transform: translate(100%); transform: translate(100%); } } @keyframes loadingAnim{ 0%{ width: 0; } 100%{ width: 100%; –webkit–transform: translate(100%); transform: translate(100%); } } @–webkit–keyframes loadingAnim_text{ 0%{ opacity: 1; color: #cba166; } 50%{ color: #333; } 100%{ opacity: .5; color: #fff; } } @keyframes loadingAnim_text{ 0%{ opacity: 1; color: #cba166; } 50%{ color: #333; } 100%{ opacity: .5; color: #fff; } } |
そして上記がアニメーションです。
超かんたんなjQuery（javascript）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /** * ローディングアニメーション */ var $delayTime = 1000; $(window).on(‘load’, function(){ var $loadingAnim = $(‘#loadingAnim’), $body = $(‘body’); setTimeout( function(){ $body.addClass(‘loaded’); $loadingAnim.find(‘.loadingAnim_line’).on(‘transitionend’, function( e ){ $(this).parent().remove(); }); }, $delayTime ); }); |
$(window).on(‘load’〜)は、ドキュメントの読み込みが終わったときのイベントになります。
その後はbodyに先程の「.loaded」をつけ、各処理を発動させます。.loadedがつくことでアニメーションが止まり、上下に背景が移動し、かつ、「LOADING」が「LOADED!」になるわけです。すべてCSSで管理していますね。
この項の最大のポイントは、アニメーションが終わったことで発生するイベント「transitionend」を感知して.loadingAnim全体を削除していることです。バグの原因になる可能性のある不要なDOMは消しているわけです。
さて、色々書きましたが結局はbodyのクラスを変えるだけなので、classList.add( ‘loaded’ );なんかでも出来ます。removeは少し面倒かもしれませんがJavascriptでも書けてしまいます。
これで完成です！Wow!
こだわりのポイント
人それぞれ状況によりけりなので読み飛ばしていただいて結構ですが、アニメーションは
- 早すぎないこと
- メリハリの有る変化をすること
が大事かな、なんて思っています。今回はtransitionにeaseInOutCircを指定したり、他のところは一定のペースでヌルヌル動くようにしています。
1 | transition: all .3s cubic–bezier(.785, .135, .15, .86) 0s; |
この点は「時間割くのはナンセンス！」といって疎かにしてしまうと、途端に野暮ったくなってしまいます…
さいごに
いかがでしたか。
あくまで持論ではありますがお役立ていただければ幸いです。ちなみにボツになっていますので、そのままコピペしてご利用いただいてもおそらく滅多にカブらないかな、と思います。
ラクでカッコいいローディングアニメーション
zipをダウンロードする
いちおうIE11+で見れた…ような気がします！
ただ、優れたSVGローディングアニメーションのギャラリーやスマートな動きをするGIFアニもあるので、是非探してみてください！
でわ！
