Tengo un formulario en el que el usuario elige, a través de un control deslizante de rango, y luego hace clic en un mapa SVG para enviar un formulario. En 'touchstart click', me gustaría mostrar un SVG animado durante tres segundos y luego enviar el formulario.

Este código que muestra el cargador en el teléfono pero no la animación (presenta lo que parece ser una instantánea de la animación. La animación funciona en el sitio web):

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

El CSS para #loader es visibilidad: oculto. Si uso 'display: none' en lugar de 'visibility', no se muestra en absoluto.

Aquí hay un jsfiddle que funciona en fiddle pero no en el sitio.

Este código funciona (el cargador se muestra y está animado) en la computadora portátil, pero la pantalla del cargador no aparece en el teléfono (probablemente debido al problema de visualización mencionado anteriormente).

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

Estoy desarrollando la aplicación con PHP y JS desde una perspectiva web (porque eso es lo que sé en este momento) y uso webview para convertirla en una aplicación. Está en la aplicación webview que estoy viendo en el teléfono.