Displaying a Dialog Loading Message

Display a basic loading message while waiting for dialog content to load.

by Adhik Bagul

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css">
<button class="open">Open Dialog</button>

<div id="dialog" title="Basic dialog">
    <p>Dialog Content</p>
</div>

CSS

body {
    font-size: 0.8em;
}

/*
 * Styles for the loading div added to the body for
 * displaying loading text.
 *
 */
.ui-dialog-loading {
    border: none;
    text-align: center;
    font-size: 1.3em;
    z-index: 200;
    -webkit-animation: textshadow 1s ease-in-out 0s infinite alternate;
    -moz-animation: textshadow 1s ease-in-out 0s infinite alternate;
    -o-animation: textshadow 1s ease-in-out 0s infinite alternate;
    animation: textshadow 1s ease-in-out 0s infinite alternate;
}

/*
 * Simple text-shadow animation used with the dialog loading
 * text.
 *
 */
@-webkit-keyframes textshadow {
    from { text-shadow: none; }
    to { text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); }
}

@-moz-keyframes textshadow {
    from { text-shadow: none; }
    to { text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); }
}

@-o-keyframes textshadow {
    from { text-shadow: none; }
    to { text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); }
}

@keyframes textshadow {
    from { text-shadow: none; }
    to { text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); }
}

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px;
}

JavaScript

(function( $ ) {
    
    // Extending the dialog widget to support a loading message.
    $.widget( "app.dialog", $.ui.dialog, {
    
        // The loading message isn't displayed by default, only
        // when this option is switched to true.
        options: {
            loading: false
        },
       
        // Called any time an option is set.
        _setOption: function( key, value ) {

            // The loading message should be inserted
            if ( key === "loading" && value && this._isOpen ) {
                
                // Hide the dialog component.
                this.uiDialog.css( "display", "none" );
                
                // Insert the loading message into the DOM,
                // using the same positioning options as the
                // dialog itself.
                $( "<div/>" ).appendTo( "body" )
                             .addClass( "ui-dialog-loading ui-widget" )
                             .text( "Loading..." )
                             .position( this.options.position );
                
            } else if ( key === "loading" && ! value && this._isOpen ) {
                
                // The loading message has been set to false,
                // so remove the loading message from the DOM.
                // Also display the dialog div.
                $( ".ui-dialog-loading" ).remove();
                this.uiDialog.css( "display", "block" );
                
            }
                
        }
    
    });

    $(function() {

        // Create's the dialog widget.
        $( "#dialog" ).dialog({
            autoOpen:false,
            modal: true
        });

        
        $( ".open" ).button().on( "click", function( e ) {
        
            // When the button is clicked, open the dialog,
            // and display the loading message.
            $( "#dialog" ).dialog( "open" )
                          .dialog( "option", "loading", true );
            
            // Wait five...