file upload with semantic ui progress meter

I want to use progress bar from Semantic-UI to display file upload progress, but the code I've tried makes the progress meter fill up "too fast" and I wonder if it is my backend code on the server that I must wait for and the progress meter is actually correct and measures the upload time, while I must wait for the files to write to storage? Or can I improve the progress meter so that it is not "too fast" because the experience should not be that it is too fast. I mean too fast that is is not synced with the actual time it takes to get the response and load the next page. The progress meter fills up fast and then I must wait for 5-10 more seconds.

Can I make the progress bar show the actual progress of the upload? I'm glad that the meter is actually filling up, but I want it to be more in sync with the whole upload. If you want to look at the upload page this is the link.

I have used just the simple code from semantic ui

<div class="ui progress"> <div class="bar"></div> </div>

And some js

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');

    $('form').ajaxForm({
        url: '{{ form_url }}',
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function(xhr) {
           $('#wrapper').html(xhr.responseText);
        }
    });

});

This is how it looks when I must wait and the progress meter is filled.