How to display a loading animation while file is generated for download?

Question

I have a web application where the user can generate PDF and PowerPoint files. These files may take some time to generate, so I would like to be able to display a loading an

Answer 1

I found the answer by jcubic worked really well for my needs.

I was generating a CSV (plain text) so did not need the additional binary library.

If you need to do the same, here is how I adjusted it to work for plain text files.

$('.download').on('click', function() {
    // show the loading indicator
    $('.indicator').show();

    // get the filename
    var fname = $(this).attr('data-download');

    $.get("/products/export", function(file) {
        var dataURI = 'data:text/csv;charset=utf-8,' + file;
        $('' + fname + '').attr({
            download: fname,
            href: dataURI
        })[0].click();

        // hide the loading indicator
        $('.indicator').hide();
    });
});

The filename is specified with data-download attribute in HTML on the tag with .download class.