So erstellen Sie mit Pure CSS eine schöne Ladeanimation für Ihre App

Wenn Sie in letzter Zeit im Internet waren, haben Sie höchstwahrscheinlich eine nette, subtile Ladeanimation gesehen, die den Seiteninhalt ausfüllt, bevor Sie sie ordnungsgemäß laden.

Einige der sozialen Giganten wie Facebook verwenden diesen Ansatz sogar, um das Laden von Seiten zu verbessern. Wie können wir das mit nur einfachem CSS machen?

  • Was werden wir bauen?
  • Willst du nur das Snippet?
  • Teil 1: Erstellen unserer Ladeanimation
  • Teil 2: Verwenden unserer Ladeanimation in einer dynamischen App

Was werden wir bauen?

Wir werden eine Ladeanimation mit einer CSS-Klasse erstellen, die Sie (so gut wie) auf so ziemlich jedes gewünschte Element anwenden können.

Dies gibt Ihnen große Flexibilität bei der Verwendung und macht die Lösung mit nur CSS schön und einfach.

Während das Snippet ziemlich klein ist und Sie es einfach kopieren und einfügen können, werde ich Sie durch das Geschehen und ein Beispiel für die dynamische Verwendung beim Laden von Daten führen.

Willst du nur das Snippet?

Sie können es hier greifen!

CSS-Animation laden CSS-Animation laden. GitHub Gist: Code, Notizen und Snippets sofort freigeben. 262588213843476 Gist

Muss ich vor diesem Tutorial wissen, wie man animiert?

Nein! Wir werden genau durchgehen, was Sie tun müssen. Tatsächlich ist die Animation in diesem Tutorial relativ einfach.

Teil 1: Erstellen unserer Ladeanimation

In diesem ersten Teil geht es darum, die Ladeanimation zusammenzustellen und auf einer statischen HTML-Website anzuzeigen. Das Ziel ist es, das eigentliche Snippet zu erstellen. Wir werden nur HTML und CSS für diesen Teil verwenden.

Schritt 1: Erstellen von Beispielinhalten

Zu Beginn möchten wir einen kleinen Beispielinhalt. Hier gibt es wirklich keine Einschränkungen. Sie können dies mit einfachem HTML und CSS erstellen oder dies zu Ihrer Create React App hinzufügen!

Für den Rundgang werde ich HTML und CSS mit einigen Beispielen für Inhalte verwenden, die es uns ermöglichen, dies in der Tat zu sehen.

Erstellen Sie zunächst eine neue HTML-Datei. Füllen Sie diese HTML-Datei mit Inhalten, mit denen wir mit unserer Animation spielen können. Ich werde Fillerama verwenden, das Zeilen aus meiner Lieblingssendung Futurama verwendet!

Wenn Sie mir folgen wollen, sieht mein Projekt folgendermaßen aus:

my-css-loading-animation-static - index.html - main.css 

Folgen Sie dem Commit!

Schritt 2: Beginnen Sie mit einer Fundamentladeklasse

Erstellen wir für unsere Stiftung eine neue CSS-Klasse. Fügen wir in unserer CSS-Datei Folgendes hinzu:

.loading { background: #eceff1; } 

Fügen wir diese Klasse einigen oder allen unserer Elemente hinzu. Ich habe es einigen Absätzen, Überschriften und Listen hinzugefügt.

For example...

Das gibt uns einen grundlegenden Hintergrund, aber wir möchten diesen Text wahrscheinlich ausblenden. Wenn es geladen wird, haben wir diesen Text noch nicht, daher möchten wir höchstwahrscheinlich Fülltext oder eine feste Höhe verwenden. In beiden Fällen können wir die Farbe auf transparent einstellen:

.loading { color: transparent; background: #eceff1; } 

Wenn Sie bei Listenelementen feststellen, ob Sie die Klasse auf das Listenelement der obersten Ebene anwenden (

Original text


    oder
      ) gegen das Listenelement selbst (
    • ), es sieht aus wie ein großer Block. Wenn wir am Ende aller Listenelemente einen kleinen Rand einfügen, sehen wir einen Unterschied in der Darstellung:

      li { margin-bottom: .5em; } 

      Und jetzt fängt es an zusammen zu kommen, aber es sieht einfach wie Platzhalter aus. Animieren wir dies also so, dass es tatsächlich geladen wird.

      Folgen Sie dem Commit!

      Schritt 3: Styling und Animation unserer Ladeklasse

      Bevor wir unsere Klasse tatsächlich animieren, müssen wir etwas animieren. Fügen wir also unserer .loadingKlasse einen Farbverlauf hinzu :

      .loading { color: transparent; background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%); } 

      Dies bedeutet, dass wir einen linearen Gradienten wollen, der um 100 Grad geneigt ist, wobei wir mit 30% beginnen und auf 70% und zurück auf 70% #eceff1verblassen .#f6f7f8#eceff1

      Es ist anfangs schwer zu erkennen, wenn es noch ist. Es sieht möglicherweise wie eine Blendung auf Ihrem Computer aus! Wenn Sie es sehen möchten, bevor Sie fortfahren, können Sie mit den Farben oben spielen, um den Farbverlauf zu sehen.

      Nachdem wir etwas zu animieren haben, müssen wir zunächst eine Keyframes-Regel erstellen:

      @keyframes loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } 

      Wenn diese Regel angewendet wird, ändert sich die Hintergrundposition von 100% der x-Achse auf 0% der x-Achse.

      Mit der Regel können wir unsere Animationseigenschaft zu unserer .loadingKlasse hinzufügen :

      .loading { color: transparent; background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%); animation: loading 1.2s ease-in-out infinite; } 

      Our animation line is setting the keyframe to loading, telling it to last for 1.2 seconds, setting the timing function to ease-in-out to make it smooth, and tell it to loop forever with infinite.

      If you notice though after saving that, it's still not doing anything. The reason for this is we're setting our gradient from one end of the DOM element to the other, so there's nowhere to move!

      So let's try also setting a background-size on our .loading class.

      .loading { color: transparent; background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%); background-size: 400%; animation: loading 1.2s ease-in-out infinite; } 

      Now, since our background expands beyond our DOM element (you can't see that part), it has some space to animate with and we get our animation!

      Follow along with the commit!

      Part 2: Using our loading animation in a dynamic app

      Now that we have our loading animation, let's put it into action with a basic example where we fake a loading state.

      The trick with actually using this is typically we don't have the actual content available, so in most cases, we have to fake it.

      To show you how we can do this, we're going to build a simple React app with Next.js.

      Step 1: Creating an example React app with Next.js

      Navigate to the directory you want to create your new project in and run:

      yarn create next-app # or npm init next-app 

      It will prompt you with some options, particularly a name which will determine the directory the project is created in and the type of project. I'm using my-css-loading-animation-dynamic and the "Default Starter App".

      Once installed, navigate into your new directory and start up your development server:

      cd [directory] yarn dev # or npm run dev 

      Next, let's replace the content in our pages/index.js file. I'm going to derive the content from the previous example, but we'll create it similar to how we might expect it to come from an API. First, let's add our  content as an object above our return statement:

      const content = { header: `So, how 'bout them Knicks?`, intro: `What are their names? I'm Santa Claus! This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! Good news, everyone! I've taught the toaster to feel love!`, list: [ `Yes! In your face, Gandhi!`, `So I really am important? How I feel when I'm drunk is correct?`, `Who are those horrible orange men?` ] }

      To display that content, inside , let's replace the content with:

      { content.header }

      { content.intro }

        { content.list.map((item, i) => { return (
      • { item }
      • ) })}

      And for the styles, you can copy and paste everything from our Part 1 main.css file into the tags at the bottom of our index page. That will leave us with:

      With that, we should be back to a similar point we finished at in Part 1 except we're not actively using any of the loading animations yet.

      Follow along with the commit!

      Step 2: Faking loading data from an API

      The example we're working with is pretty simple. You'd probably see this coming pre-generated statically, but this helps us create a realistic demo that we can test our loading animation with.

      To fake our loading state, we're going to use React's useState, useEffect, and an old fashioned setTimeout to preload some "loading" content, and after the setTimeout finishes, update that content with our actual data. In the meantime, we'll know that we're in a loading state with a separate instance of useState.

      First, we need to import our dependencies. At the top of our pages/index.js file, add:

      import { useState, useEffect } from 'react'; 

      Above our content object, let's add some state:

      const [loadingState, updateLoadingState] = useState(true); const [contentState, updateContentState] = useState({}) 

      And in our content, we can update the instances to use that state:

      { contentState.header }

      { contentState.intro }

        { contentState.list.map((item, i) => { return (
      • { item }
      • ) })}

      Once you save and load that, you'll first notice we get an error because our list property doesn't exist on our contentState, so we can first fix that:

      { Array.isArray(contentState.list) && contentState.list.map((item, i) => { return ( 
    • { item }
    • ) })}

      And after that's ready, let's add our setTimeout inside of a useEffect hook to simulate our data loading. Add this under our content object:

      useEffect(() => { setTimeout(() => { updateContentState(content); updateLoadingState(false) }, 2000); }, []) 

      Once you save and open up your browser, you'll notice that for 2 seconds you don't have any content and then it loads in, basically simulating loading that data asynchronously.

      Follow along with the commit!

      Step 3: Adding our loading animation

      Now we can finally add our loading animation. So to do this, we're going to use our loading state we set up using useState and if the content is loading, add our .loading  class to our elements.

      Before we do that, instead of individually adding this class to each item in the DOM, it might make more sense to do so using CSS and adding the class to the parent, so let's do that first.

      First, update the .loading class to target our elements:

      .loading h1, .loading p, .loading li { color: transparent; background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%); background-size: 400%; animation: loading 1.2s ease-in-out infinite; } 

      Then we can dynamically add our class to our tag:

      Note: if you use Sass,  you can manage your loading styles by extending the .loading class in the instances you want to use it or create a placeholder and extend that!

      And if you refresh the page, you'll notice it's still just a blank page for 2 seconds!

      The issue, is when we load our content, nothing exists inside of our tags that can that would allow the line-height of the elements to give it a height.

      But we can fix that! Because our .loading class sets our text to transparent, we can simply add the word Loading for each piece of content:

      const [contentState, updateContentState] = useState({ header: 'Loading', intro: 'Loading', list: [ 'Loading', 'Loading', 'Loading' ] }) 

      Note: We can't use an empty space here because that alone won't provide us with a height when rendered in the DOM.

      And once you save and reload the page, our first 2 seconds will have a loading state that reflects our content!

      Follow along with the commit!

      Some additional thoughts

      This technique can be used pretty broadly. Being a CSS class makes it nice and easy to add where every you want.

      If you're not a fan of setting the Loading text for the loading state, another option is to set a fixed height. The only issue with that is it requires more maintenance for tweaking the CSS to match what the content loading in will look like.

      Außerdem wird dies nicht perfekt sein. Meistens wissen Sie nicht genau, wie viel Kopie Sie auf einer Seite haben. Das Ziel ist es zu simulieren und anzudeuten, dass es Inhalte geben wird und diese gerade geladen werden.

      Was ist deine Lieblingsladeanimation?

      Lass es mich auf Twitter wissen!

      Machen Sie mit!

      Wenn Sie darauf warten, dass eine Seite geladen wird, ist es hilfreich zu wissen, dass im Hintergrund etwas funktioniert.

      Sie sollten also eine schöne Ladeanimation für Ihre App erstellen.

      Aus diesem Grund hat @colbyfayock dieses Handbuch geschrieben, das Ihnen zeigt, wie Sie diese Animation mit reinem CSS.//t.co/h8hGwqZ3sl erstellen

      - freeCodeCamp.org (@freeCodeCamp) 24. Mai 2020

      Folgen Sie mir für mehr Javascript, UX und andere interessante Dinge!

      • ? Folge mir auf Twitter
      • ? ️ Abonniere mein Youtube
      • ✉️ Melden Sie sich für meinen Newsletter an