JSFiddle - React, Tailwind, and code Playground
HTML
<div id="ajaxLoadAni">
<img src="http://i57.tinypic.com/2jb0f4n.gif" alt="Carregando..." width="32px" height="32px" />
<span>Carregando...</span>
</div>
<select name="meuSelect">
<option value="0">Selecione</option>
<option value="1">Primeira</option>
<option value="2">Segunda</option>
<option value="3">Terceira</option>
<option value="4">Quarta</option>
<option value="5">Quinta</option>
</select>
<p id="valor"></p>
CSS
#ajaxLoadAni {
display: none;
position: fixed;
top: 50px;
left: 45%;
padding: 8px;
width: 100px;
z-index: 9999;
text-align: center;
}
JavaScript
$(document).ready(function() {
$("select[name=meuSelect]").change(function(event) {
event.preventDefault();
var valor = $(this).val();
ajaxLoadAni('In');
$("#valor").text(valor);
ajaxLoadAni('Out');
});
});
function ajaxLoadAni(inOut) {
'use strict';
if (inOut === 'In') {
$('#ajaxLoadAni').fadeIn('slow'); //EXIBE A IMAGEM DE CARRREGANDO
} else {
$('#ajaxLoadAni').stop(false,true).fadeOut('slow'); //ESCONDE A IMAGEM DE CARRREGANDO
}
}