Loading before displaying content

Question

I need to make a gif animation before I load my graphics, and after the upload is done, the animation stops appearing, I’m using Highcharts to create the graphics, but I have no idea how to do this upload, I’ll leave some examples here, so you can get a sense of what I need.

This would be the upload before the chart is displayed,

Once loaded the animation would disappear and would only be the graph.

I will leave the source code of one of the graphics, they have no css because it is in highcharts, and it is built entirely in JS.

        <div class="col-lg-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div>
                                            <div id="container01" style="min-width: 310px; height: 350px; margin: 0 auto"></div>
                                            <script src="js/grafico_preventiva_AxE.js"></script>
                                        </div>
                                    </div>
                                </div>
                            </div>

JS:

            $.getJSON(baseUrlApi + 'mpreventivasaxe')
            .done(function (response) {

                Highcharts.setOptions({
                    colors: ['#50B432', '#4286f4']
                });

                Highcharts.chart('container01', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'PREVENTIVAS ABERTAS X EXECUTADAS'
                    },
                    xAxis: {
                        categories: response.categories,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Hora Edição'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat:  '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                      '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: response.series
                });
            });

Answer 1

You can use the option loading ofHighcharts with a CSS personalized:

var chart = new Highcharts.Chart({
    // ...

    loading: {
        labelStyle: {
            backgroundImage: 'url("http://jsfiddle.net/img/logo.png")',
            display: 'block',
            width: '136px',
            height: '26px',
            backgroundColor: '#000'
        }
    },

    // ...
});

You just need to put the image you want in the attribute backgroundImage.

Reference: Highcharts loading image.