JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css">
<div id="prog"></div>
<button id="do-it">Do it!</button>

JavaScript

(function($, window, undefined) {
    //is onprogress supported by browser?
    var hasOnProgress = ("onprogress" in $.ajaxSettings.xhr());

    //If not supported, do nothing
    if (!hasOnProgress) {
        return;
    }
    
    //patch ajax settings to call a progress callback
    var oldXHR = $.ajaxSettings.xhr;
    $.ajaxSettings.xhr = function() {
        var xhr = oldXHR();
        if(xhr instanceof window.XMLHttpRequest) {
            xhr.addEventListener('progress', this.progress, false);
        }
        
        if(xhr.upload) {
            xhr.upload.addEventListener('progress', this.progress, false);
        }
        
        return xhr;
    };
})(jQuery, window);

$("#do-it").click(function() {
    $('#prog').progressbar({ value: 0 });
    
    $.ajax({
      method: 'GET',     data:'fnoasfnoaifnaofnapsfnapoifnapsiufbapisfbapiufbpaiufbaioufbsaiubfiausfbiausbfiaubsfipaubsfiaubsfiaubsifbuaisfbaiusbfiasubfiasubfasbfibaifbasbfaisufbaiudbfaudbfiaudbfiadubfiadubfiaudbdfiaudfbdaiubviadbvfiadufbiadpubfaduiv',
        url: '/echo/json/',
        dataType: 'json',
        success: function() {
            console.log('YAYE!', arguments[0]);
        },
        error: function() {
            console.log('AWWW!');
        },
        progress: function(e) {
            console.log('progress: ', e.loaded, e.total);
            if(e.lengthComputable) {
                var pct = (e.loaded / e.total) * 100;
                $('#prog')
                .progressbar('option', 'value', pct)
                .children('.ui-progressbar-value')
                .html(pct.toPrecision(3) + '%')
                .css('display', 'block');
            } else {
                console.warn('Content Length not reported!');
            }
        }
    });
});