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

    JavaScript

    シンプルでレスポンシブ対応のカッコイイ通知を表示できる「Notyf」

    Notyfはシンプルでレスポンシブに対応したカッコイイ通知を表示させる…

  2. JavaScript

    レスポンシブでカスタマイズ性に優れたカルーセルを実装できるjQueryプラグイン「slick」

    slickというjQueryプラグインを使えば、レスポンシブでカスタマ…

  3. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

  4. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

  5. nanogallery2

    JavaScript

    美しくてハイクオリティなイメージギャラリーを実装できる「nanogallery2」

    nanogallery2はパーソナルニーズにピッタリなイメージギャラリ…

  6. RefineSlide

    JavaScript

    多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

    多数のエフェクトがあってレスポンシブWebデザインにも対応しているスラ…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP