ページの読み込みが完了するまでローディングを表示させるあれを、CSSとjQueryでめっちゃシンプルに実装してみました。その時の備忘録です。
読み込み完了後jQueryのfadeOutでローダー画面を消すだけのシンプル仕様
ローダー要素をz-index
で最前面に配置し、ページの読み込み完了後に、ローダー要素をフェイドアウトするシンプルな仕様です。
実装したのは当サイトのトップページです。左上のロゴ(スマホは真ん中)か右上(スマホは左上)のメニューから移動できます。
jQuery
jQueryの記述はこれだけです。500
がフェイドアウトする時間で、linear
がイージングです。
$(window).load(function(){ $('#loader').fadeOut(500, "linear"); });
CSS
div#loader
がローディングの親要素で、div#loader div
が親要素の中央に位置するように調整しています。
div#loader{ width: 100%; height: 100%; overflow: hidden; background: #fff; text-align: center; position: fixed; z-index: 99999; top: 0; left: 0; } div#loader div{ width: 200px; margin-left: -100px; margin-top: -100px; text-align: center; position: absolute; top: 50%; left: 50%; }
ローディングのアニメ
今回はローディングのアニメも、CSSで実装しました。
#loader-bar { position: absolute; top: 0; left: 50%; margin-left: -15px; width: 30px; height: 30px; border-radius: 50%; border: 6px solid #ccc; border-right-color: transparent; -webkit-animation: loader 1s infinite linear; -moz-animation: loader 1s infinite linear; -ms-animation: loader 1s infinite linear; animation: loader 1s infinite linear } @-webkit-keyframes loader { 0% { -webkit-transform: rotate(0deg); opacity: 1 } 50% { -webkit-transform: rotate(180deg); opacity: 1 } 100% { -webkit-transform: rotate(360deg); opacity: 1 } } @-moz-keyframes loader { 0% { -moz-transform: rotate(0deg); opacity: 1 } 50% { -moz-transform: rotate(180deg); opacity: 1 } 100% { -moz-transform: rotate(360deg); opacity: 1 } } @-ms-keyframes loader { 0% { -ms-transform: rotate(0deg); opacity: 1 } 50% { -ms-transform: rotate(180deg); opacity: 1 } 100% { -ms-transform: rotate(360deg); opacity: 1 } } @-ms-keyframes loader { 0% { transform: rotate(0deg); opacity: 1 } 50% { transform: rotate(180deg); opacity: 1 } 100% { transform: rotate(360deg); opacity: 1 } }
HTML
ついでにHTMLも
<div id="loader"> <div> <span id="loader-bar"></span> <svg> <title>Mac使いの備忘録</title> <desc>Mac使いの備忘録|Logo</desc> <use xlink:href="#logo"/> </svg> </div> </div>
まとめ
CSSとjQueryを組み合わせて結構シンプルに実装できました。ローディングのアニメをCSSでやらなければ、普通にIEにも対応しますので、利用範囲は広いかと思われます。
イカしたローディングの画像を作れるサイトを発見したので貼っておきます。