busy-load

JavaScript

シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

busy-loadはシンプルでフレキシブルなローディングマスクを実装することができるjQueryプラグインです。CSSや画像、fontawesomeなどを活用したスピナーを表示させることが可能です。シンプルながらも、優れたカスタマイズ性の高さが魅力的ですね。

busy-load

デモ

デモページでは、CSSや画像によるローディングマスクをはじめ、Fontawesome、Custom、Sizing、Text、Animation、Classesに分けられた各サンプルがたくさん設置されています。

これだけ豊富なタイプがあれば、自分好みのローディングマスクも見つかりやすそうですね。自サイトやイメージに近いものを、デモに触れながらじっくり探してみてはいかがでしょうか?

どのタイプもローディング時はオーバーレイがコンテンツ全体にかかり、その中央にローディングアイコンが表示されます。ローディングアイコンにはさまざまなタイプがあり、その動きもそれぞれ異なります。

アイコンはどれもコンパクトなものなので、いろんなサイトに合わせやすいと思います。

また、オーバーレイがかかるアニメーションには、fadeとslideの2つの値が用意されています。さらにアニメーションデュレーションには、slowやfastといった値もあり、これらを組み合わせることで、アニメーションの印象も変わってきます。

オプションが豊富に用意されているので、カスタマイズ性もバッチリです。主なオプションは、action、spinner、image、fontawesome、custom、color、background、maxSize、minSize、text、textColor、textMargin、textPosition、animation、animationDuration、containerClass、containerItemClass、spinnerClass、textClassです。

このほか、いくつかのイベントのセッティングもできます。

シンプルながらも高いカスタマイズ性を有するローディングマスクを実装したい人は、ぜひ「busy-load」を活用されてみてはいかがでしょうか?

busy-load

linkunderlineテキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」前のページ

スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」次のページscrollama.js

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animat…

    jQueryでアニメーションが動作中の時だけ、またはアニメーションが停…

  2. NO IMAGE

    JavaScript

    フェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」

    Prrple Sliderはフェードアニメーションやスライド、ループ、…

  3. Glide.js
  4. Before and after slider
  5. no-image

    JavaScript

    ウィークデイ(週)のオプションを作成できる「jquery-weekdays」

    jquery-weekdaysはウィークデイ(週)のオプションを作成で…

  6. Vertical Fixed Navigation #2

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP