Replace link onclick

[fheppell]

I'm using a bootstrap pseudo-button (a link that looks like a button). It links to a page using PHP that downloads the file (the user is never shown the linking page). When the link is clicked I want it to be replaced with something to indicate progress is happening (for instance a spinning loader) as the download takes a long time to actually begin.

How would I go about doing this?

Here is my button code

<a class="btn btn-primary btn-large " href="?key=<?php echo $key = $_GET['key'];?>&amp;download=true"><i class="icon-cloud-download"></i> Download</a>

[JorgeM]

Take a look at spin.js. Ever since I came a cross that, I stopped using animated gifs.

You can use jQuery onclick event on this button to start the spinner.

[pixelsoul]

I believe this is what JorgeM is referring to? http://fgnass.github.io/spin.js/

This looks nice for generating a indicator of activity, and like JorgeM said, you would just use an onclick event to show it. Though, there would need to be some type of callback to hide it once the download is ready, so you may want to call the download using ajax so you can hide the spinner on success or failure.

[fheppell]

JorgeM: That looks great, thanks

pixel: I have 0 experience in ajax and not that much in javascript, I'm more of a backend guy myself. However the backend code can only return the download itself and not anything else as this would break the headers. How would I go about doing that?