Uma das soluções é usando o sonic.js;
Documentação e exemplos:
https://github.com/padolsey/sonic.js/blob/master/README.md
Como usar?
Você pode criar uma função javascript deste jeito e adicionar ela no arquivo .js que preferir (lembre de carregar juntamente o arquivo sonic.js):
var spinnerLoading;
function getAjaxLoading() {
if (typeof spinnerLoading === 'undefined') {
spinnerLoading = new Sonic({
width: 100,
height: 100,
stepsPerFrame: 1,
trailLength: 1,
pointDistance: .02,
fps: 30,
fillColor: '#05E2FF',
step: function(point, index) {
this._.beginPath();
this._.moveTo(point.x, point.y);
this._.arc(point.x, point.y, index * 7, 0, Math.PI*2, false);
this._.closePath();
this._.fill();
},
path: [
['arc', 50, 50, 30, 0, 360]
]
});
}
spinnerLoading.play();
return spinnerLoading.canvas;
}
Chamando o spinner:
$('#resultado').html(getAjaxLoading());
Você pode criar diferentes spinners, só depende da sua criatividade.
Então concluindo seu código poderia ficar + ou - assim (não esqueça de tratar os erros que podem retornar do ajax, caso contrário o spinner ficará lá rodando infinitamente).
Neste caso o código está todo junto, mas você pode declarar o getAjaxLoading em um arquivo .js que é carregado em todo lugar, você escolhe a melhor forma de implementação para o seu caso...:
<script type="text/javascript">
jQuery(document).ready(function() {
var spinnerLoading;
function getAjaxLoading() {
if (typeof spinnerLoading === 'undefined') {
spinnerLoading = new Sonic({
width: 100,
height: 100,
stepsPerFrame: 1,
trailLength: 1,
pointDistance: .02,
fps: 30,
fillColor: '#05E2FF',
step: function(point, index) {
this._.beginPath();
this._.moveTo(point.x, point.y);
this._.arc(point.x, point.y, index * 7, 0, Math.PI * 2, false);
this._.closePath();
this._.fill();
},
path: [
['arc', 50, 50, 30, 0, 360]
]
});
}
spinnerLoading.play();
return spinnerLoading.canvas;
}
jQuery('#ajax_form').submit(function(e) {
e.preventDefault(); //Evitamos o comportamento padrão que é o submit do formulário
var dados = jQuery(this).serialize();
//Adicionando o LOADING
$('#resultado').html(getAjaxLoading());
$.ajax({
type: "POST",
url: "salvaregistro.php",
dataType: "JSON",
data: dados
}).done(function(data) {
$('#resultado').html(data).fadeIn("slow");
});
});
});
</script>