Hourglass Loader

Dieses HTML-Element kann auf zwei Arten verwendet werden: Als Wrapper um den zu ladenden Inhalt herum, wie ursprünglich vorgesehen, sowie als ein Overlay welches über dem zu ladenden Inhalt liegt und diesen dann aufdeckt.

Das Markup dazu sieht aus wie folgt:

<div class="hourglass-loader-wrapper loading">
  <div class="hourglass-loader">
    <div class="hourglass-loader-outer">
      <div class="hourglass-loader-inner">
        <div class="hourglass-loader-content">
          <img alt="Demo Image" src="example.png" />
        </div>
      </div>
    </div>
  </div>
</div>

<div class="example-container contains-hourglass-loader-overlay">
  <div class="hourglass-loader-wrapper overlay loading">
    <div class="hourglass-loader">
      <div class="hourglass-loader-outer">
        <div class="hourglass-loader-inner">
          <div class="hourglass-loader-content"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="example-content"></div>
</div>

Sobald das Markup angelegt wurde, fügen Sie das nötige Scripting hinzu welches den entsprechenden Inhalt lädt und entfernen Sie dann, sobald dieser geladen wurde, die Klasse "loading" von dem Element mit der Klasse "hourglass-loader-wrapper".

Bitte beachten Sie dabei, dass am Ende der Animation im Wrapper-Modus noch eine nachträgliche Operation nötig wird, wenn Sie planen, dass einige der geladenen Elemente aus der Begrenzung des ursprünglichen Inhaltsblocks ausbrechen müssen. Das liegt daran, dass da einige Elemente des Wrappers "overflow: hidden" gesetzt haben. Dazu muss die Klasse "finished" an das Element gehängt werden von dem zuvor die Klasse "loading" entfernt wurde. Dies darf jedoch nicht im selben Moment wie das Entfernen der "loading"-Klasse erfolgen, die Animation muss zuerst zuende ablaufen (was standardmäßig ca. 800 ms im Wrapper-Modus und ca. 1200 ms im Overlay-Modus dauert). Dies kann man entweder über einen Timeout steuern, dessen Länge der vollen Animationsdauer entspricht, oder über eine Kombination aus Event Listener für das Ende der Animation und einem daran gekoppelten Timeout. Ein Event Listener allein reicht nicht aus, da einzelne Unterkomponenten unterschiedlich schnell und teilweise mit Verzögerung ihre Animation abspulen und bereits das erste Element, welches mit seiner Animation durch ist, das Event auslöst.

Hier ein Beispiel mit jQuery:

$('.hourglass-loader-wrapper.loading')
 .removeClass('loading')
 .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    var $el = $(this).unbind(); // Unbinding prevents the event from firing twice
    setTimeout(function(){ 
      $el.addClass('finished'); 
    }, 800); 
  });

Ein ähnliches Problem tritt auch bei der Nutzung als Overlay auf. Sobald die Animation beendet ist ist der aufgedeckte Inhalt zwar sichtbar, aber man kann damit nicht interagieren, da das nun unsichtbare Overlay immer noch davor platziert ist und somit Klicks blockiert. Daher muss auch hier die gleiche Technik wie oben angewandt werden um das Element nach dem Ende der Animation zu verbergen, nur dass der Klassenname hier ein anderer ist, nämlich "revealed":

$('.hourglass-loader-wrapper.overlay.loading')
 .removeClass('loading')
 .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    var $el = $(this).unbind();
    setTimeout(function(){ 
      $el.addClass('revealed'); // For browser without CSS pointer events support use $el.hide(); instead. Or $el.remove() if it is no longer needed.
    }, 1200); 
  });

Die "revealed"-Klasse setzt für das Overlay "pointer-events:none". Nicht alle Browser können damit vernünftig umgehen. Wenn sie ältere Browser unterstützen möchten, sollten Sie stattdessen das Overlay-Element verstecken oder komplett entfernen. Planan Sie, das Element später wieder anzuzeigen, mit invertierter Animation, dann muss zwischen dem Anzeigen des versteckten Elements und dem hinzufügen der "loading"-Klasse ein wenig Zeit vergehen, denn mit "display:none" ausgeblendete Elemente spulen beim Aktivieren der Sichtbarkeit ihre Animation nicht ab. Diese greift nur, wenn das Element zu Beginn der Animation sichtbar ist, daher muss man zwischen Aufdecken und Animieren einen Timeout einsetzen:

$('.hourglass-loader-wrapper.overlay.revealed').show();
setTimeout(function(){
  $('.hourglass-loader-wrapper.overlay.revealed').removeClass('loading').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    var $el = $(this).unbind();
    setTimeout(function(){ 
      $el.hide(); 
    }, 1200); 
  });
}, 240);

Die Geschwindigkeit der Animation kann über eine zusätzliche Klasse am Element mit der Klasse "hourglass-loader-wrapper" gedrosselt werden. Mit der Klasse "medium-anim" verdoppelt sich die Standard-Animationsdauer und mit "slow-anim" ist diese gar vervierfacht.