「PaceJs」を使用してページローダーを作る #JavaScript

はじめに

PaceJsを使用してかっこいいローダーを作成したので議事録です。
初めての使用だったこともありメモとして記録しておきます。

公式サイト

完成

pacejsとは

Pace.jsで用意されているプログレスバーは14種類のデザインがあります。
バー、スピーナー、パーセント表示タイプなど様々です。

Pace.jsの使い方

headタグ内に記述する。
JavaScriptは閉じるbodyタグ直前に書くことが多いですが、Pace.jsは最初に読み込まれるようにheadタグの上部に書くのがベストです。

<head>
    <script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css">
</head>

公式サイトの以下から取得↓↓

ページのローディング中は読み込むコンテンツの重さによって、少しずつバラバラに表示されることがあります。
そんな時は、ローディング中のコンテンツを隠すとイラつきは少しは解消できます。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="loader.css">
  <script src="./pace.js"></script>
</head>
<body>
  <div id="global-container">
    <div><img src="https://picsum.photos/id/1/5616/3744" alt=""></div>
    <div><img src="https://picsum.photos/id/2/5616/3744" alt=""></div>
    <div><img src="https://picsum.photos/id/3/5616/3744" alt=""></div>
    <div><img src="https://picsum.photos/id/4/5616/3744" alt=""></div>
    <div><img src="https://picsum.photos/id/6/5616/3744" alt=""></div>
    <div><img src="https://picsum.photos/id/8/5616/3744" alt=""></div>
    <div><img src="https://picsum.photos/id/9/5616/3744" alt=""></div>
    <style>
      img {
        max-width: 100%;
      }
    </style>
  </div>
</body>
</html>

重たい画像を数枚用意してそこにローダーを配置していきます。

公式のLoading Barを今回使用するので、こちらのcssをダウンロードします。

cssファイルにコピペするだけで使用できます。

使用後

カスタムは自由

デフォルトではこのような感じですが、cssファイルの内容を変更すること当然アレンジは自由です。
自分好みにアレンジしてかっこいいローダーを作ってみてください！

おわりに

javascriptを使って学習中にいいアニメーション効果を見つけたので、
記録に残しました。
今後はjavascriptを使ったことを述べていきアウトプット　の質を上げていきます。