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

    JavaScript

    CSS3を使った豊富なスクロールエフェクト「stroll.js」

    stroll.jsはCSS3を使った豊富なCSSリストスクロールエフェ…

  2. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  3. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  4. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  5. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

最近の記事

  1. 16インチMacBook Pro
  2. レトロスペクティブ V2.0
  3. YAECA ワイドテーパードデニム 10-13WW

アーカイブ

PAGE TOP