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

関連記事

  1. Bootstrap Carousel Touch Slider with Text Animation
  2. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  3. qpScroll
  4. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  5. hsimp

    JavaScript

    パスワードの安全性を教えてくれる「hsimp」

    hsimpは、パスワードがどれだけ安全かを判定してくれるスクリプトです…

  6. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP