0

I'm making an website with tons of Notes and Books to Download. I would Like to show any image or any Text when Link is Download link is clicked and when request is complete and file starts to Download , then remove the image or Loading Text.

I've gone through lots of forums but couldn't find any solution.

Here is the html File of mine

<body style="color: black;  background-color: #EFF6E4;font-family: myFirstFont; ">
  
  <ol class="tree">
    
    <li>
      <label for="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
      <ol>
        
        <li>
          <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
          <ol>
           <li class="file">

            <a href="
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM
">An Introduction to Error Analysis </a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li>
            
          </ol>
        </li>
        <li>
          <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li>
          </ol>
        </li>
        <li>
          <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture ( 1-5 ) From Quantum Spin</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li>
            
          </ol>
        </li>
        <li>
          <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions ( BG Sir Homework )</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten ( BG Sir Homework )</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li>
             <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li>
            
          </ol>
        </li>
        
    
  

</body>
</html>

Any help would be much much appreciated.

BlueYeti24
  • 45
  • 1
  • 8

3 Answers3

0

The click event is handled by the jquery .on("click",function(){}), but the we can't handle when the file downloading finish, my information is based on this Stackoverflow Question: Browser event when downloaded file is saved to disk

$(".file a").on("click",function(e){
  var originalHtml=$(this).html();
    $(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here
    e.preventDefault();
    var destination = this.href;
    var clickedLink=$(this);
    setTimeout(function() {
      clickedLink.html(originalHtml);
        window.location = destination;

    },1000);
    $('<iframe>').hide().appendTo('body').load(function() {
        window.location = destination;
    }).attr('src', destination);
});
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: darkblue;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body style="color: black;  background-color: #EFF6E4;font-family: myFirstFont; ">
  
  <ol class="tree">
    
    <li>
      <label for="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
      <ol>
        
        <li>
          <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
          <ol>
           <li class="file">

            <a href="
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM
">An Introduction to Error Analysis </a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li>
            
          </ol>
        </li>
        <li>
          <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li>
          </ol>
        </li>
        <li>
          <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture ( 1-5 ) From Quantum Spin</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li>
            
          </ol>
        </li>
        <li>
          <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions ( BG Sir Homework )</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten ( BG Sir Homework )</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li>
             <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li>
            
          </ol>
        </li>
        
    
  

</body>
</html>
Mehdi Bouzidi
  • 1,937
  • 3
  • 15
  • 31
0

Here I modified you code and now working solution is,

<script type="text/javascript">
  $(".file a").on("click",function(){
    $(this).text('Loading...'); // do your UI thing here
    e.preventDefault();
    var destination = this.href;
    setTimeout(function() {
        window.location = destination;
    },100);
    $('<iframe>').hide().appendTo('body').load(function() {
        window.location = destination;
    }).attr('src', destination);
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="color: black;  background-color: #EFF6E4;font-family: myFirstFont; ">
  
  <ol class="tree">
    
    <li>
      <label for="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
      <ol>
        
        <li>
          <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
          <ol>
           <li class="file">

            <a href="
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM
">An Introduction to Error Analysis </a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li>
            
          </ol>
        </li>
        <li>
          <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li>
          </ol>
        </li>
        <li>
          <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture ( 1-5 ) From Quantum Spin</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li>
            
          </ol>
        </li>
        <li>
          <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions ( BG Sir Homework )</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten ( BG Sir Homework )</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li>
             <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li>
            
          </ol>
        </li>
        
    
  

</body>
</html>

But It won't return to the original text and stuck forever on Loading.

BlueYeti24
  • 45
  • 1
  • 8
  • I edited my answer and it's working, please if it helps remember to click on the **Check Mark** in the left side of my answer, to approve it. This we'll help other users that have the same issue as you, to find the solution. Best Regards – Mehdi Bouzidi Oct 15 '17 at 12:12
  • @MehdiBouzidi Thanks ..It was exactly what I needed. One Final Question...How to change the font size and font color of Text Loading. And If I want to load Loading Gif Instead for same amount of time..How should I do?? For example If I want to any gif from here for same amount of time https://projects.lukehaas.me/css-loaders/ How should I do that – BlueYeti24 Oct 15 '17 at 12:37
  • Once again I have edited my answer check to see the result :) Good Luck – Mehdi Bouzidi Oct 15 '17 at 12:59
  • 1
    Totally Totally appreciate your effort. Thank you so much. This is all I need. Now I'm good to do. – BlueYeti24 Oct 15 '17 at 13:18
0

Here I found another solution to load gif instead which would be a best alternative but problem is It won't fade away and keeps on loading. How can I make it to end and return to original state after sometime.

  $(".file a").on("click",function(){
  $(this).parent().parent().append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
  setTimeout(removeLoader, 100); //wait for page load PLUS two seconds.
});
function removeLoader(){
    $( "#loadingDiv" ).fadeOut(0, function() {
      // fadeOut complete. Remove the loading div
      $( "#loadingDiv" ).remove(); //makes page more lightweight 
  });  
}

});
.loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #loadingDiv {
            position:absolute;;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#000;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="color: black;  background-color: #EFF6E4;font-family: myFirstFont; ">
  
  <ol class="tree">
    
    <li>
      <label for="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
      <ol>
        
        <li>
          <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
          <ol>
           <li class="file">

            <a href="
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM
">An Introduction to Error Analysis </a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li>
            
          </ol>
        </li>
        <li>
          <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li>
          </ol>
        </li>
        <li>
          <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture ( 1-5 ) From Quantum Spin</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li>
            
          </ol>
        </li>
        <li>
          <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
          <ol>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions ( BG Sir Homework )</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten ( BG Sir Homework )</a></li>
            <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li>
             <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li>
            
          </ol>
        </li>
        
    
  

</body>
</html>
BlueYeti24
  • 45
  • 1
  • 8