PROGRESS BAR.JSでプログレスバーが表示されるローディング画面を作成

分析結果などを表示するサイトで分析結果のページが表示する前に「分析中~。。。」などど別ページを表示させる方法です。

仕組み

メインのページの上にローディングのページを重ね、ローディングページのプログレスバーの作動が終わったらそのページを消すという仕組みです。

HTMLの最初にローディングページHTMLを記載しその後に通常のHTMLを記載します。

必要なもの

「jquery」とプログレスバーを表示させる「progressbar.min.js」、サンプルではCDNで読み込んでいます。

注意点

重なり順・・・ローディングページが最前面になるように「z-index」を指定。※サンプルは最前面。

画面が消える時間・・・プログレスバーが終わる時間とローディングページが消える時間を合わせないとプログレスバー作動途中でページが消えてしまいます。※サンプルでは「10000」

サンプル

サンプルを表示する

サンプルHTML ※Bootstrap5(単体で動きます)

参考サイト 動くWebデザインアイデア帳 ローディング

 

 

 

コメント

タイトルとURLをコピーしました