jQuery LoadingOverlay

JavaScript

多彩なローディング画面を実装できる「jQuery LoadingOverlay」

jQuery LoadingOverlayは、カスタマイズ性に優れた多彩なローディング画面を実装できるjQueryプラグインです。クルクル回る一般的なものから、オートリサイズに対応したりカウントダウンのタイプにしたりと、さまざまなローディング画面を表現できます。フェード表示/非表示やオーバーレイもシンプルでとても美しいですね。

Font Awesomeの利用やカウントダウン表示もできる

jQuery LoadingOverlay

上記ページに設置されているデモには、いくつかのパターンが用意されています。

画面全体にオーバーレイをかけてローディング表示する「Whole page Overlay」、特定の要素だけにローディング表示させる「Single element Overlay」、特定の要素とオートリサイズによる「Single element Overlay with auto resize」など、いろいろなパターンを見ることができます。

また、gif画像ではなく「Font Awesome」を利用できるあたりもうれしいポイントです。いちいち画像をつくったり用意する必要がないので、「時間が足りない」なんて人には助かるはず。

それから、クルクル回るローディング表示ではなく、カウントダウンで実装できるのもおもしろいと思います。これなら、ユーザーも「あとちょっとだ」と瞬時にわかるので、途中でページを離脱するリスクも防げるのではないでしょうか?

オプションも、color、custom、fade、fontawesome、image、imagePosition、maxSize、minSize、resizeInterval、size、zIndexと、いろいろ用意されているので、好みにあわせたカスタマイズをしたい人にも使いやすくなっています。

多彩で実用的なローディング画面を効率よく実装したい人は、ぜひ活用してみてください。

zingtouchタッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」前のページ

Photoshopで古びた羊皮紙に書かれた地図イメージの作り方次のページ

関連記事

  1. Siema

    JavaScript

    軽量でシンプルで依存性のないカルーセルを実装できる「Siema」

    Siemaは軽量でシンプル、そしてjQueryなどの依存性のないカルー…

  2. ScrollMenu.js

    JavaScript

    縦横配置やナビメニューと統合できる便利なスクロールバー「ScrollMenu.js」

    ScrollMenu.jsは通常の味気ないスクロールバーを便利で新しい…

  3. Rain & Water Effect Experiments
  4. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

  5. qpScroll
  6. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP