Novice, Paragon, Master


    0.1.2 • Public • Published

    Build Status


    A simple, but flexible loading-mask plugin for jQuery.

    • Overlay
      • choose an animation, like fade or slide in
      • fiddle around with plenty of customization options
    • Spinners
      • css - select from a collection of pure css-spinners from Tobias Ahlin
      • image - use an image as a spinner
      • custom - pass in your custom jQuery-Element
      • fontawesome - just use the library-icons
    • Text
      • show some text
      • position it on top, bottom, left or right of the spinner
      • customize your text, like color, margin, size ...
    • ES6
      • because busy-load is completely written in ES6, you can simply require or import it


    You can find some examples here.

    Getting started

    Add jQuery

    <script src=""></script>

    then busy-load

    <script src=""></script>
    <link href="" rel="stylesheet">

    and call the plugin from your element

    // with options
    $("#another-element").busyLoad("show", {
        background: "#000",
        spinner: "cube",
        animation: "slide"
    // with options
    $("#another-element").busyLoad("hide", {
      animation: "fade"


    The overlay gets an absolute position, so if your caller element has a position of static, busy-load will turn it into relative.



    <script src=""></script>
    <link href="" rel="stylesheet">


    npm i busy-load
    • HINT: busy-load imports its scss to the bundle, so you will need a sass-loader.


    import 'busy-load'; 




    • You'll find a normal and a minified version of the js-& css file inside the dist-folder. You can copy them wherever you'd like and include them by a link- and script-tag.


    Here's a full list of all the default-options you can use and modify on the plugin:

    Property Description value Default value
    action show or hide the overlay show, hide -
    spinner a CSS-spinner pump, accordion, pulsar, cube, cubes, circle-line, circles, cube-grid pump
    image use an image as spinner source for image (location, string) false
    fontawesome use a fontawesome-icon as a spinner fa fa-refresh fa-spin fa-2x fa-fw false
    custom use a custom jQuery-element as spinner jQuery-element $("#el") false
    color color of the spinner color-value #fff
    background background of the overlay color-value rgba(0, 0, 0, 0.21)
    maxSize max-size of the spinner size-value 50px
    minSize min-size of the spinner size-value 20px
    text text next to the spinner String or false false
    textColor color of the text color-value default is color
    textMargin margin of the text - works on every textPosition size-value false
    textPosition where should the text appear top, bottom, left, right right
    animation use an animation, when overlay appears or hides fade, slide false
    animationDuration pass in duration of animation slow, fast, integer in ms fast
    containerClass add a class to the overlay-container class-name busy-load-container
    containerItemClass add a class to the container-item class-name busy-load-container-item
    spinnerClass add a class to the spinner class-name busy-load-spinner
    textClass add a class to the text class-name busy-load-text

    To see them in action and learn how to use them goto this place.


    busy-load includes some basic events

    Event Description parameters before overlay is shown event, $container, $targetNode
    bl.shown after overlay appeared event, $container, $targetNode
    bl.hide before overlay disappears event, $container, $targetNode
    bl.hidden after overlay is removed from DOM event, $container, $targetNode


    For a fullscreen-overlay use $.busyLoadFull():

    • the method accepts the same options like busyLoad()


    If you don't wanna pass in your options all the time, because it would repeat itself, you can use $.busyLoadSetup:

        animation: "slide",
        background: "rgba(255, 152, 0, 0.86)"


    To see the actual default-settings use $fn.busyLoad.defaults:


    Setting a new default value:

    $.fn.busyLoad.defaults.color = "blue"


    busy-load is licensed under the MIT License - see the LICENSE file for details.


    Andreas Stephan


    npm i busy-load

    DownloadsWeekly Downloads






    Unpacked Size

    575 kB

    Total Files


    Last publish


    • piccard