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. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  2. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

  3. paroller.js

    JavaScript

    垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」

    paroller.jsは垂直・水平方向の動きに対応したパララックス効果…

  4. Segment

    JavaScript

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

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

  5. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

最近の記事

  1. KPS-88
  2. Happy Plugs AIR1
  3. cheero Stream 10000mAh
  4. BOSE HOME SPEAKER 300
  5. RP-PC112

アーカイブ

PAGE TOP