Bootstrap の Spinner を利用してロード中画面を表示する

Bootstrap の Spinner を利用してロード中画面を表示する

大きな画像を利用したページや、大量のコンテンツが掲載されたページなどにおいて、画像やリソースが読み込まれるまで画面を表示させたくない場合、ロード画面を表示したい事があります。

世の中には JQuery で同様の事を実現できるプラグインなどがありますが、Bootstrap を利用してるのであれば、Bootstrap の Spinner を利用して簡単に実装することができますので、ここでサンプルコードをご紹介したいと思います。

もちろん、ページには Bootstrap に必要なライブラリを読み込むようにしてください。

HTML
CSS
JavaScript

実際のサンプルはこちらでご確認いただけます。