implementar GIF loading

Alguien tiene un ejemplo de como implementar el clasico GIF, para los casos en que se demore en cargar una accion.
Bueno basicamente encontre un “ProgressBar” pero en la pagina no me indica como implementarlo de manera adecuada para los casos antes mencionado.

Agradeceria si me indicaran como podria implementarlo de manera adecuada , puesto que mas he trabajado con Jquery y basicamente esto lo implementaba para los metodos AJAX en los JS

Gracias de antemano.

Saludos

Investigando por ahi encontre un post en el cual trataron el mismo problema

https://vaadin.com/forum#!/thread/282658

Basicamente la solucion es agregar un estilo para poder manejar el loading .


/* Server transaction indicator */
.v-loading-indicator, .v-loading-indicator-delay, .v-loading-indicator-wait {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 30000;
background-color: #999999;
background-repeat: no-repeat;
background-position: 50%;
cursor: wait;
}
.v-loading-indicator {
background-image: url(icons/animations/loading-indicator.gif);
}
.v-loading-indicator-delay {
background-image: url(icons/animations/loading-indicator-delay.gif);
}
.v-loading-indicator-wait {
background-image: url(icons/animations/loading-indicator-wait.gif);
}