【簡単！】ロード画面の作り方【CSS Loaderで瞬殺です】

スポンサードリンク

ロード画面ってどうやって作るんだろう？簡単に作れたらいいんだけど...。どんなものが作れるのか、例も見せてほしいです。

このような疑問に答えます。

この記事を書いているぼくはプログラミング歴2年目です。

ロード画面を作るのって何かむずかしそうですよね。

「うわこれどうやるの？オワタ...。」と感じた人もいるかもです。

しかしこの記事では、ロード画面を作る簡単な方法を教えます。

CSS Loaderというサイトからファイルをダウンロードして、クオリティの高いロード画面を実装していきます！

【簡単！】ロード画面の作り方【CSS Loaderで瞬殺】

以下の手順で説明していきます。

1.CSS Loaderを導入する手順
2.CSS Loaderのカスタム例

今回、ローダーを非表示にする際にjQueryを使います。

もしjQueryがわからない方は使うときに参考記事をご紹介するので安心してください。

そちらを参考にしてもらえたらと思います。

CSS Loaderの導入方法

まずCSS LoaderのGitHubページへ行きます。

下にスクロールすると見える「download the zip file」をクリックしてフォルダをダウンロードします。

ダウンロードしたフォルダを、ロード画面を表示させたいフォルダへ移動させてcss-loader.cssファイルを読み取らせます。

読み取らせるファイル（css-loader.css）の場所：css-loader-master>css-loader-master>dist>css-loader.css

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta content="width=decive-width, initial-scale=1.0" name="viewport"/>
    <title>css-loader.css</title>
    <link rel="stylesheet" href="css-loader-master/css-loader-master/dist/css-loader.css">
</head>
<body>
    
</body>
</html>

上記の感じにファイルを読み取ったらロード画面を作る準備OKです。

次は実際にロード画面を作るコードを書いていきます。

とはいってもちょっと書くだけですので大丈夫ですよ！

<div class="loader loader-default is-active"></div>というコードを書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta content="width=decive-width, initial-scale=1.0" name="viewport"/>
    <title>css-loader.css</title>
    <link rel="stylesheet" href="css-loader-master/css-loader-master/dist/css-loader.css">
</head>
<body>
    
    <div class="loader loader-default is-active"></div>

</body>
</html>

表示されました。

もし表示されていない場合は相対パスを使った読み込み方を解説！【パターン別に解説します】を参考にしてください。

しかしこれでは永遠にロード状態なので、

「ページの読み込みが終わったらフェードアウトさせる」

ということをやってみます。

ちょっとコードを追加

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta content="width=decive-width, initial-scale=1.0" name="viewport"/>
    <title>css-loader.css</title>
    <link rel="stylesheet" href="css-loader-master/css-loader-master/dist/css-loader.css">
</head>
<body>

    <div class="loader loader-default is-active"></div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>   
    <script>
        
        $(window).on("load", function () { 
            $(".loader").delay(500).fadeOut(1200);
            
        });
        
    </script>


</body>
</html>

jQueryのコードを追加しました。

jQueryのことをよく知りたい方は下記の記事をどうぞ。