Novice, Paragon, Master

    busy-load

    0.1.2 • Public • Published

    Build Status

    busy-load

    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

    Demo

    You can find some examples here.

    Getting started

    Add jQuery

    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    

    then busy-load

    <script src="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.css" rel="stylesheet">
    

    and call the plugin from your element

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

    Hint

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

    Installation

    cdn

    <script src="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.css" rel="stylesheet">
    

    npm

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

    import

    import 'busy-load'; 
    

    require

    require('busy-load'); 
    

    copy

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

    Options

    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.

    Events

    busy-load includes some basic events

    Event Description parameters
    bl.show 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

    Fullscreen

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

    $.busyLoadFull("show");
    $.busyLoadFull("hide");
    
    • the method accepts the same options like busyLoad()

    Setup

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

    $.busyLoadSetup({
        animation: "slide",
        background: "rgba(255, 152, 0, 0.86)"
    }); 
    

    Defaults

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

    $.fn.busyLoad.defaults
    

    Setting a new default value:

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

    License

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

    Author

    Andreas Stephan

    Install

    npm i busy-load

    DownloadsWeekly Downloads

    287

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    575 kB

    Total Files

    41

    Last publish

    Collaborators

    • piccard