Mostrar una animación mientras se carga un iframe

Recientemente he tenido que conectar un sistema de gestión con una web pública mediante un iframe. Esto es sencillo, pero me he dado cuenta de que el tiempo que pasa desde que el usuario visita la web que carga el iframe hasta que el iframe se carga, producía dudas en el usuario: ¿está cargando?, ¿porque no funciona?.

Buscando un rato he pensado que una medida para paliar esto consiste en cargar una imagen animada (GIF o PNG) y ocultarla cuando el iframe ha cargado completamente. Al menos de esta manera el usuario recibe algo de información: tranquilo, dame un par de segundos y te muestro la información que necesitas 🙂

Para hacer esto ha bastado con un poco de CSS y el comportamiento onLoad (no estándar pero soportado por todos los navegadores) de la etiqueta iframe. Dejo el ejemplo comprimido por aquí para quién lo necesite. No es necesario montar un virtualhost en Apache para probarlo. Basta con abrir el fichero con un navegador y listo. Salud 😉

ACTUALIZADO: 01/04/2018
Gracias al comentario de Miguel he podido revisar el código asociado inicialmente a esta publicación. Me ha dado oportunidad de corregir algunos pequeños detalles: aquí está la nueva versión. Además, para poder responder a Miguel, he podido publicar una nueva versión en base a un nuevo enfoque: mostrar la imagen de fondo constantemente. Esta imagen se «tapa» por la aplicación cuando está funcionando y ha cargado y se muestra cada vez que hay un cambio de pantalla dentro de la aplicación. Este enfoque es sencillo y muy efectivo. Salud 😉