Animated loader screen on submit of form works on laptop not on iphone using JS

Question

I have a form where the user picks, via a range slider, and then clicks on an SVG map to submit a form. On 'touchstart click', I'd like to show an animated SVG for three seconds and then submit the form.

This code that shows loader on phone but no animation (it presents what seems to be a snapshot of the animation. Animation works on website):

$('.region').on('touchstart click', function (e) {
    document.getElementById("loader").style.visibility = "visible";
    $('#region').val($(this).data('val')); // sets to region
    $('#myForm').submit();
    e.preventDefault();
});

The CSS for #loader is visibility: hidden. If I use 'display: none' instead of 'visibility' it does not show at all.

Here is a jsfiddle that works in fiddle but not on site.

This code works (loader shows and is animated) on the laptop but the loader screen does not show up on the phone (probably due to the display issue mentioned above).

$('.region').on('touchstart click', function (e)  {
    $("#loader").show();
    e.preventDefault();
    $('#region').val($(this).data('val')); // sets to region
    document.getElementById("myForm").submit();
});

I am developing the app with PHP and JS from a web perspective (because that is what I know right now) and using webview to make it an app. It's in the webview app that I am viewing on the phone.