Zenn
🤖

javascriptのローディング(ライブラリ：pace.js)

2022/06/11に公開
JavaScript
pace
tech

備忘録です。
ファイル読み込み中のローディングを簡単に表示できる
https://codebyzach.github.io/pace/

作成

html

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./pace.js"></script>
  <link rel="stylesheet" href="loader.css">
</head>
<body>
  <div class="container">
    test
  </div>
</body>
</html>

js

以下サイトにあるpace.jsを格納
https://github.com/CodeByZach/pace

css

以下サイトにある、「Themes」から、ローディングを選択し、「DOWNLOAD」をクリックし、格納
htmlではloader.css
https://codebyzach.github.io/pace/

cssの加工

loading中はhtmlを表示させないようにするため。
上のcssの一部上に以下のコードを追加

.pace-done .container {      //pace-doneはファイル読込完了時。
  opacity: 1;　　　　　　　　//pace-runningはファイル読込中
  transition: opacity 1s;
}
.container{
  opacity: 0;
}

他にもいろいろアレンジできそうだが、とりあえず。

Discussion