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. Blindify
  2. paroller.js

    JavaScript

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

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

  3. PopSelect

    JavaScript

    タグ形式のセレクトボックスをポップオーバーで表示させる「PopSelect」

    PopSelectはタグ付けするような感覚のセレクトボックスをポップオ…

  4. Scroll Indicator

    JavaScript

    シンプルなスクロールインジケーターを実装できる「Scroll Indicator」

    Scroll Indicatorは、スクロールによるアニメーションでコ…

  5. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

  6. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

最近の記事

  1. Anker PowerExpand 8-in-1 USB-C PD 10Gbps データ ハブ
  2. SAP-001
  3. OWL-QI10W2Q18W
  4. アースクーラー3WAY

アーカイブ

PAGE TOP