I want to show a spinner while uploading a video is processing
But after choosing a file spinner simply does not appear

html

<div class='spwrap' id='spwrap'>
<img class='spinner' src='spinner.gif' alt='img'>
</div>

css

.spwrap{
    display:none;
}

js

var spwrap = $('#spwrap'); // this is spinner wrap

inpfile.on('change', function(){
    spwrap.slideDown();  // doesn't slide
    var f = inpfile[0].files[0];
    var fd = new FormData();
    fd.append('inpfile', f);
    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: fd,
        async: false,
        contentType: 'multipart/form-data',
        success: function (data){
            console.log(data);
            spwrap.slideUp();  // sometimes shortly slideDown and slideUp immediately
    },
    cache: false,
    contentType: false,
    processData: false
  });
});

I also tried spwrap.show() instead of slideDown - the same result

how to solve this ?

update

I tried:

inpfile.on('change', function(){
    spwrap.slideDown();
    // the rest of code is removed
});

and it works i.e. spwrap is visible