Member Avatar for 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>
  • 3 Contributors
  • 3 Replies
  • 250 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fheppell
Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.