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). <br> 

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>