今回は、ページの読み込み時、jQueryを使い進捗状況をプログレスバーで表示する方法を、実際にサンプルコードを用いて、詳しく記載していこうと思います。 ページを読み込む際、jQueryでページローディングを実装しているサイトをよく見かけますが、プログレスバーを実装しているサイトは少ないように感じます。そこで、今回記載する「プログレスバーでの表示機能」を用意しておくと、ページローディングと同様に、すべての画像の準備が整うのを待ってから、ページを表示することができます。画像をたくさん含むページやファイルサイズの大きいページに、ページローディングのUIとして実装することをおすすめします。 という事で、それでは今回はッ、 ・プログレスバー表示機能の概要 ・プログレスバー表示に必要な処理 ・プログレスバー表示のHTMLとCSS ・プログレス、ローディング表示のjQuery 上記について記載していこう
![jQueryで実装するページローディングのプログレスバー | 群馬 ホームページ制作:MK-Design/MKデザイン「群馬県伊勢崎市」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a907df81f287a271b09239a513d993de0c6c8804/height=288;version=1;width=512/https%3A%2F%2Fmk-design.xyz%2Fwp-content%2Fuploads%2F2021%2F01%2FMK20210130.jpg)