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と、いろいろ用意されているので、好みにあわせたカスタマイズをしたい人にも使いやすくなっています。

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

関連記事

  1. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  2. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  3. JavaScript

    画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」…

    とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します…

  4. jQuery Video Extend

    JavaScript

    動画をチャプターごとに区切れる「jQuery Video Extend」

    jQuery Video Extendは動画をチャプターごとに区切った…

  5. Shuffle Letters

    JavaScript

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグイン「Shuffle Lett…

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグ…

  6. jQuery Tabs with Content Overlays

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP