ローディング画面の作成

webサイトに最初にアクセスした時によく見かける、読込中にクルクル回ってる画面の作成工程の備忘録です。

まずはローディング中に表示させるパーツの準備

まずはクルクル回るパーツ自体を作成します。画像でもCSSでもどちらでも対応できるかと思いますが、今回はcssで作成してみました。

See the Pen loading by webdevnote (@webdevnote) on CodePen.

準備しておいた読込中に表示させるパーツをjsで制御します。
具体的には、webページの読み込みが完了したタイミングで、loading用パーツにclassを付与して非表示にするまでを実装してみたいと思います。

const loading = document.querySelector('.frame__loading');

window.addEventListener('load', () => {
  loading.classList.add('is--loaded');
});

/* ローディング完了したらローディング画面を隠す */
.frame__loading.is--loaded {
    opacity: 0;
    visibility: hidden;
}

本記事は下記の書籍やサイトを参考にさせていただき作成いたしました。（外部サイトに移動します）