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. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  2. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  3. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  4. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  5. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  6. multi.js

    JavaScript

    検索機能がついたセレクトボックスを実装できる「multi.js」

    multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレ…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP