はじめに
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を使ったことを述べていきアウトプット の質を上げていきます。