Ayuda con codigo progress bar

Alguien que sea tan amable de ayudarme con un codigo para que ssalga una progress bar al darle click a una imagen y resulte en otra imagen porfisssss :distant::distant::distant::distant::distant:

Podrías elaborar más tu pregunta? Nos ayudaría ver alguna porción de tu código, cómo llamas a la otra imagen, si ya está cargada o la quieres cargar específicamente, etc...

Lo que tengo es esto:

<img id="myImage" onclick="changeImage()" src="img/resultado1.jpg" class="img-responsive">


<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "img/resultado1.jpg";
} else {
image.src = "img/resultado2.jpg";
}
}
</script>

Con este codigo, logro que al darle click a resultado1.jpg me la cambia por resultado2.jpg

LO QUE QUIERO LOGRAR ES:

AL DARLE CLICK A LA IMAGEN resultado1.jpg, salga una imagen de "cargando.gif" (ya tengo el gif) y despues de unos segundos show resultado2.jpg


AYUDA PORFAAA

algo así Demo XD.

Siisisisisiiiiiiiii algo asi, llevo una semana buscando por toda la red e intentando y no podía muchisisisimas gracias...

Una ultima pregunta, se puede modificar ese codigo de tal manera que al darle click a la primera imagen esta desaparezca y lo demas siguiendo lo mismo