【jQuery】ローディングアニメーション GIF版

初めに

どうも、NNCの石上です。今回はローディングアニメーションのGIF版を作っていきます。ただ、基本的なシステムはCSS版とほとんど変わらないので、サクサクやっていこうと思います。

ローディングアニメーション GIF版

サイトにアクセスすると、画像のようなアニメーションが見えます。

読み込みが完了すると、このアニメーションがフェードアウトして、メインコンテンツが現れます。

基本的な流れはCSS版と変わりません。

実際のコード

<div id="loading" class="l-loading">
    <img src="img/flat-preloaders/128x128/Preloader_2/Preloader_2.gif" alt="">
</div>
<main class="l-main">
       <p>
           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
           Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
           Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
           Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
       </p>
       <p>
           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
           Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
           Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
           Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
       </p>
       <p>
           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
           Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
           Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
           Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
       </p>
       <p>
           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
           Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
           Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
           Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
       </p>
</main>
/* ローディング画面 */
.l-loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #191919;
  transition: all 0.5s 5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.l-loading.loaded {
  opacity: 0;
  visibility: hidden;
}
.l-main {
  width: 1000px;
  margin: 0 auto;
}
p {
  margin-top: 50px;
  font-size: 18px;
  letter-spacing: 1px;
}
window.onload = function() {
	var loading = $('#loading');
	loading.addClass('loaded');
}

ローディングアニメーションをCSSで実装する方法は他の記事でお伝えしましたが、今回はGIFアニメーションを用います。(なので、CSSの記述はかなりシンプルになりました)具体的な実装方法もすごく簡単で、gif形式のデータをimgタグで記述するだけです。Javascriptも全く変わりません!

解説

するようなことはほとんどありません。
GIFアニメーションをあらかじめ作成しておいて、それをimgタグでHTML上に記述すればOKです。こちらもCSSアニメーションと同様、自分で作成することも可能なのですが、あらかじめWeb上でフリーのものが公開されています。今回は「FLAT PRELOADERS」を利用しています。データをダウンロードして、使いたいものをHTMLに組み込みましょう。

他にもいろんなサイトで提供されていますので、そちらもご紹介しておきます。

FLAT PRELOADERS
FREE Minimal Loop Preloaders
PRELOADERS

以上で完成です!

RECENT ENTRIES

  • 【ウェブ解析】Core Web Vitalsを指標としたサイト改善方法

    VIEW MORE
  • 【jQuery】「jquery.cookie.js」で言語切り替え機能を実装する

    VIEW MORE
  • 【ウェブ解析】インプレッションにおけるSEOとMEOの重要性とは?

    VIEW MORE

CONTACT