更新この記事を書いてから数年経ち、今ではもっとカンタンに実装できる方法がたくさん出ています。今回はJSとCSSをCDN(ファイルをサーバーにアップしなくても、コードを書くだけでプラグインを実装できる方法)で読み込むだけでカンタンにこんなものも実装できます!というご紹介を追加します。barsこのプラグインを使ってカンタンなページローディングを実装してみます。CDN一覧のページから、JSのコードをコピーします。websites!「https://〜〜pace.min.js」と書かれている行にマウスを合わせると、「COPY」ボタンが出て来ます。Tag」を選択します。headタグ内などに貼り付けます。src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>CSSを選ぶあとはこのページから好きな色とモーションを選択します。COLOR」を押すとカラーピッカーが出ますので好きな色を選択すると、以下のモーションの色が変わります。CLIPBOARD」を押すとCSSのコードがコピーできますので、CSSファイル内など任意の場所に貼り付けます。随時更新しますローディングの実装でまた便利な方法などをちょこちょこ追記していきます。以下旧記事この記事を開いていただいた時に、画面中央にローディングの画像がクルクル回っていたかと思います。前のテーマで実装してましたけど、新テーマでは外しました。ブログ記事や画像など、コンテンツを全てロードするまで表示されて、全て読み込まれると消えます。ちなみにこの記事ではローディングアニメーションの要素はGIF画像を使っています。jQueryの実装方法すさまじくカンタンです。ローディングの画像(を囲む)要素名に置き換えてください。jQuery(“#loading”).hide();});[/javascript]でOK。この記事ではローディング画像をdivで囲っていて、そのdivにid=”loading”を付けています。jQuery自体はローディングの画像(要素)を、ページ全体が読み込み終わったタイミングで消しているだけです。fadeOut()やslideUp()など、アニメーションしながら消すことも出来ます。HTMLとCSSの実装ローディング中のみ表示させるだけでいいのですが、元のコンテンツが崩れないようにしないといけません。GIF画像だけだとこんな感じでちょっとあじけないので、divで囲ってちょっと飾ってみます。HTML[html][/html]CSSではdivを少しいじって、丸角にしたり透過させたりしています。CSS3なのでIE8以下非対応です。ここはお好みなので自由に実装してください。fixedを使っています。さんから拝借しました。loader形状や色、スピードにサイズ、色などカスタマイズ性が高く、シンプルでキレイなGIF画像ができます。今回の記事は画面読込中のグルグルまわるローディング画像を出す。́∀`*)ローディングのクルクルがあると、ないときよりもロード時間が早く感じるそうです。今回の僕も、よそのサイトがローディングのクルクルを実装していて、少し読み込みが長かったけど離脱せずに待っていた自分に気づいたからでした。