Nasrul Hazim Bin Mohamad

jQuery: Create Loading Indicator with ajaxSend & ajaxComplete

May
27

Referring to my earlier post jQuery: Show Loading…, a better way to show & hide loading icon – by binding to ajaxSend and ajaxComplete event.

The Html Markup

 <div id="loading" class="overlay-loading">
    <i class="loading-icon fa fa-5x fa-circle-o-notch fa-spin"></i>
 </div>

The CSS

.overlay-loading {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 2000;
}
.loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
}

The JavaScript

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

References:

  1. Ajax Events
  2. JsFiddle
  3. FontAwesome

Bootstrap: Loading / Process Dialog

Jul
07
var app;
app = app || (function () {
    var process = $('&lt;div id=&quot;process&quot; class=&quot;modal hide fade&quot; tabindex=&quot;-1&quot; data-backdrop=&quot;static&quot; data-keyboard=&quot;false&quot;&gt;&lt;div class=&quot;modal-header&quot;&gt;&lt;h3&gt;Processing...&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;modal-body&quot;&gt;&lt;div class=&quot;progress progress-striped active&quot;&gt;&lt;div class=&quot;bar&quot; style=&quot;width: 100%;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
    return {
        showProcess: function() {
            process.modal('show');
        },
        hideProcess: function () {
            process.modal('hide');
        },

    };
})();

Just call app.showProcess(); to display the process dialogue and call app.hideProcess(); to hide it.

Reference: http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap/comment-page-1