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

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  2. LC Micro Slider
  3. ScrollMenu.js

    JavaScript

    縦横配置やナビメニューと統合できる便利なスクロールバー「ScrollMenu.js」

    ScrollMenu.jsは通常の味気ないスクロールバーを便利で新しい…

  4. jCider

    JavaScript

    レスポンシブ対応のjQueryカルーセルプラグイン実装「jCider」

    jCiderはレスポンシブ対応のシンプルなカルーセルを実装できるjQu…

  5. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

  6. JavaScript

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

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

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP