PACE.jsを使って簡単ローディング画面の作り方

ローディング画面をサイトに実装したい!
アニメーションも入れたい!
プラグインで簡単に導入できないの??

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

本記事ではPACE.jsプラグインを使って簡単にローディング画面を入れる方法について解説します。

pace.jsの公式サイトより、好みのテーマのソースをコピーしよう。



http://github.hubspot.com/pace/docs/welcome/

上記公式サイトよりpace.js、好みのテーマのソースをコピーします。
コピーしたらheadに読み込ませましょう。

CSS、JSファイルに下記を追加!

See the Pen EGqjpb by Kohei (@kouk05) on CodePen.0

コードペンのデモです。
ローディング時コンテンツを非表示にしたいのでbody直下にdivを追加しCSSで非表示にしときましょう。
また、jQueryでコンテンツがフェードインするようにします。
以上で完成です!

Ads

関連記事

JavaScript プログラミング

【簡単】slickスライダーでデバイス事にオプションを切り替えよう【レスポンシブ設定を追加】

2022.04.07
68
JavaScript プログラミング

【簡単】jQueryとCSSを使って要素をふわっと出す方法【プラグイン不要】

更新日:2022.04.05
36
JavaScript プログラミング

【簡単】JavaScriptを使って任意の文字列を置換する方法

2022.04.05
20
JavaScript プログラミング

スムーズスクロール機能をjavascript(jquery)を使用し実装する方法

更新日:2020.04.27
383