Hyperlink Fortschritt beim laden anzeigen

Question

Wenn man auf Youtube auf ein Video klickt sieht man am oberen Rand so eine Ladeleiste. Wie kann ich diese auf meiner eigenen Seite machen?

Answer 1

Du kannst das href-Attribut von den Links durch ein data-href-Attribut ersetzen und über das onClick-Event mit this.getAttribute('data-href') zugreifen. Innerhalb der move-Funktion wird dann der Wert des data-href-Attributs übergeben.

<style>
#progressBar {
  position: relative;
  width: 100%;
  height: 10px;
  background-color: #ddd;
}

#barStatus {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #25F;
}
</style>

<div id="progressBar">
  <div id="barStatus"></div>
</div>

<a data-href="https://example.com" onclick="move(this.getAttribute('data-href'))">Click Me</a>

und die Javascript Funktion.

var width = 0;

function move(h) {

  var elem = document.getElementById("barStatus");   
  var id = setInterval(frame, 10);
 
  function frame() {
 
    if (width >= 100) {
    
      window.location = h;
      
    } else {
    
      width++;
      elem.style.width = width + '%';
      
    } 
  }
}

JSFiddle Demo.