Solution 1 :

You could try something like this with CSS animations

var myVar;

function myFunction() {
  document.getElementById("loader").style.display = "block";
  document.getElementById("myDiv").style.display = "none";
  myVar = setTimeout(showPage, 3000);

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
/* Center the loader */

#loader {
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border: 10px solid #3498db;
  border-radius: 50%;
  border-top: 10px solid #f3f3f3;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  100% {
    -webkit-transform: rotate(360deg);

@keyframes spin {
  0% {
    transform: rotate(0deg);
  100% {
    transform: rotate(360deg);

#myDiv {
  display: none;
  text-align: center;
<a onclick="myFunction()" href="#" target="_self">Download</a>

<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">
  <p>Some text in my newly loaded page..</p>

Problem :

i have a link <a href='/download.php' target='_blank'>Download</a>, and it takes time to begin the as for the preparation of file to be downloaded. i want to show a loading animation soon after the user click on download button. tried to find the solution , but failed. plz guide / help. the last i tried is

  div#page_loader {
    position: absolute;
    top: 0;
    bottom: 0%;
    left: 0;
    right: 0%;
    background-color: white;
    z-index: 99;
    display: none;
    text-align: center;
    width: 100%;
    padding-top: 25px;

<a onclick="javascript:document.getElementById('page_loader')


Comment posted by kshetline

I fixed the formatting of your code, because it was originally unreadable. Once formatted, it’s clear that you need to fix the image source because

Comment posted by epascarello

You can show an image, but page navigation is going to kill it.

Comment posted by Shobhit Gupta

i think somthing like on click the download link, a text msg fade in “plz wait”, and id fade out when download begins will be more easy. any clue to get this done ?