Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-10-20

はじめに

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

公式サイト

完成

pacejs_test2.gif

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>

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

スクリーンショット 2022-10-20 17.43.39.png

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

<!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をダウンロードします。

スクリーンショット 2022-10-20 17.51.33.png

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

使用後

pacejs_test.gif

カスタムは自由

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

おわりに

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?