Lass uns eine schicke, aber unkomplizierte Seiten-Ladeanzeige erstellen

Ein Ladezustand ist heutzutage auf Websites ziemlich üblich, insbesondere mit dem Aufkommen von Progressive Web Apps und reaktiven Websites. Es ist eine Möglichkeit, die „wahrgenommene“ Leistung zu verbessern – das heißt, den Eindruck zu erwecken, dass die Website schneller lädt, als sie es tatsächlich tut.

Es mangelt nicht an Möglichkeiten, eine Ladeanzeige zu erstellen – eine kurze Suche auf CodePen reicht aus, um unzählige Beispiele zu finden, von animierten GIFs bis hin zu komplexen Animationen. Während es verlockend ist, die schickste der schicken Ladeanzeigen zu bauen, können wir mit nur minimalem CSS und JavaScript eine ziemlich gute Arbeit leisten.

Hier ist ein Beispiel, das wir gemeinsam erstellen können.

Siehe den Pen
Preloader mit JavaScript FadeOut von Maks Akymenko (@maximakymenko)
auf CodePen.

SVG und CSS sind alles, was wir für den Spinner brauchen

Ich gehe davon aus, dass Sie bereits ein Projekt erstellt haben, daher werden wir direkt einsteigen und mit dem Spinner beginnen – oder auch „Pre-Loader“ genannt.

SVG ist eine großartige Option für einen Spinner. Es ist skalierbar und die Implementierung ist so einfach wie ein Bild-Tag. Wir könnten einen von Grund auf neu erstellen, zum Beispiel in einem Bildeditor wie Illustrator, Sketch oder Figma. Für dieses Beispiel werde ich einfach diesen hier von loading.io nehmen, was eine gute Ressource ist, um verschiedene Loader zu erstellen und anzupassen.

Nachdem wir nun ein SVG für die visuelle Darstellung haben, können wir es in HTML einfügen

<div class="preloader">
  <img src="spinner.svg" alt="spinner">
</div>

Wir verwenden .preloader als Wrapper, hauptsächlich weil es uns hilft, das Bild auf der Seite zu positionieren, aber auch, weil es uns hilft, den Seiteninhalt auszublenden und einzublenden, während der Loader arbeitet.

Lass es uns gestalten

.preloader {
  align-items: center;
  background: rgb(23, 22, 22);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.3s linear;
  width: 100%;
  z-index: 9999;
}

Das hier tut einige Dinge, die mehr als nur kosmetisch sind

• Wir zeigen den Loader direkt in der Mitte des Bildschirms an, indem wir Flexbox-Eigenschaften und -Werte verwenden.
• Wir haben das Element die gesamte Breite und Höhe des Bildschirms einnehmen lassen und ihm einen schwarzen (eigentlich einen sehr, sehr dunklen grauen) Hintergrund gegeben. Das bedeutet, dass alles dahinter (wie der Seiteninhalt) vollständig verborgen ist. Wenn unsere Seite eine andere Hintergrundfarbe hätte (z. B. weiß), würden wir die Hintergrundfarbe des Loaders entsprechend anpassen.
• Die Position ist fest, sodass das Scrollen die Position auf der Seite nicht beeinflusst. Außerdem ist der z-index hoch genug, dass kein anderes Element darüber gestapelt werden und die Sichtbarkeit blockieren sollte.

Das sollten wir bisher beim Öffnen im Browser sehen

Etwas leichtes JavaScript kümmert sich um das Ausblenden

Wir haben einen schicken Spinner, der die gesamte Seite abdeckt, egal ob wir ihn auf kleinen oder großen Bildschirmen betrachten. Jetzt können wir etwas Logik schreiben, um ihn nach einer bestimmten Zeit auszublenden. Das erfordert eine kleine Dosis JavaScript.

Zuerst wählen wir das .preloader-Element aus, das wir gerade gestaltet haben

const preloader = document.querySelector('.preloader');

Es wäre tatsächlich viel einfacher, dem Loader eine Klasse hinzuzufügen, die seine Opazität auf null setzt. Allerdings wäre das nicht so flüssig wie das, was wir hier tun, nämlich ein wenig JavaScript zu verwenden, um eine fadeOut-Funktion zu erstellen.

const fadeEffect = setInterval(() => {
  // if we don't set opacity 1 in CSS, then
  // it will be equaled to "" -- that's why
  // we check it, and if so, set opacity to 1
  if (!preloader.style.opacity) {
    preloader.style.opacity = 1;
  }
  if (preloader.style.opacity > 0) {
    preloader.style.opacity -= 0.1;
  } else {
    clearInterval(fadeEffect);
  }
}, 100);

💡 jQuery hat eine Funktion, die das direkt von Haus aus erledigt. Nutzen Sie diese, wenn Sie jQuery bereits in Ihrem Projekt verwenden. Andernfalls ist es am besten, sie mit Vanilla JavaScript selbst zu implementieren.

Ich erkläre das JavaScript ein wenig. Wie der Kommentar besagt, wenn unser .preloader-Element nicht die opacity-Eigenschaft gesetzt hat, dann ist sie gleich leer ("") und wir können ihr manuell einen Wert von 1 zuweisen, um sicherzustellen, dass sie beim Laden des Dokuments angezeigt wird.

Sobald wir wissen, dass die Opazität gesetzt ist, manipulieren wir sie. Die gesamte Funktion ist in setInterval eingeschlossen und wir prüfen alle 100 Millisekunden die opacity-Eigenschaft, um zu sehen, ob sie größer als null ist. Solange sie über null liegt, verringern wir ihren Wert in Schritten von 0,1, was einen sanften Effekt erzeugt, der das Element im Laufe der Zeit ausblendet.

Sobald wir Opazität null erreichen, verwenden wir clearInterval, um zu verhindern, dass das Skript unendlich läuft. Fühlen Sie sich frei, mit Zeitmessung und Decrement-Punkten zu experimentieren, um Ihren Bedürfnissen gerecht zu werden.

Das Letzte, was zu tun ist, ist, die Funktion aufzurufen. Wir rufen sie auf, wenn das Fenster geladen ist

window.addEventListener('load', fadeEffect);

Wir verwenden absichtlich das load-Ereignis anstelle von DOMContentLoaded, da das DOMContentLoaded-Ereignis ausgelöst wird, wenn das Dokument vollständig geladen und analysiert wurde. Das bedeutet, dass es *nicht auf Stylesheets, Bilder und Unterframes wartet, bis sie fertig geladen sind*, *bevor es ausgeführt wird*. Das load-Ereignis kann verwendet werden, um eine vollständig geladene Seite zu erkennen, und das ist genau das, was wir suchen. Andernfalls würde die Funktion starten, bevor unser CSS und SVG bereit sind.

Fügen Sie etwas Inhalt in das HTML ein und probieren Sie es aus. Hier ist das Demo noch einmal

Siehe den Pen
Preloader mit JavaScript FadeOut von Maks Akymenko (@maximakymenko)
auf CodePen.

---

Herzlichen Glückwunsch! Sie wissen jetzt, wie man einen ziemlich netten Ladeeffekt erstellt, indem man nur ein Bild und eine Prise CSS und JavaScript verwendet. Viel Spaß!