JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progress">
    <div class="bar">
    </div>
</div>
<input type="file" />

CSS

#progress {
    width: 200px;
    border:1px solid #000;
    height:25px;
}

.bar {
    background-color:#000;
    width:0%;
    height:100%;
}

JavaScript

$('input[type=file]').change(function() {
    var fd = new FormData();
    fd.append('file', $('input[type=file]').get(0).files[0]);
    
    $.ajax({
        url: '.',
        type: 'POST',
        processData: false,
        data: fd,
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.addEventListener('progress', function(ev) {
                $('.bar').css('width', (ev.loaded/(ev.total/100))+'%');
            }, false);
            
            return xhr;
        },
        beforeStart: function() {
            $('.bar').css('width', '0%');
        },
        success: function() {
            alert('done');
        }
    });
});