Πώς να χρησιμοποιήσετε το Pure CSS για να δημιουργήσετε ένα όμορφο Animation φόρτωσης για την εφαρμογή σας

Εάν έχετε επισκεφτεί πρόσφατα το Διαδίκτυο, πιθανότατα έχετε δει μια ωραία λεπτή κινούμενη εικόνα φόρτωσης που γεμίζει το περιεχόμενο της σελίδας πριν από τη χαριτωμένη φόρτωση.

Μερικοί από τους κοινωνικούς γίγαντες όπως το Facebook χρησιμοποιούν ακόμη και αυτήν την προσέγγιση για να δώσουν μια καλύτερη εμπειρία στη φόρτωση σελίδων. Πώς μπορούμε να το κάνουμε αυτό με λίγο απλό CSS;

  • Τι πρόκειται να οικοδομήσουμε;
  • Θέλετε απλώς το απόσπασμα;
  • Μέρος 1: Δημιουργία της κίνησης φόρτωσης
  • Μέρος 2: Χρησιμοποιώντας το animation φόρτωσης σε μια δυναμική εφαρμογή

Τι πρόκειται να οικοδομήσουμε;

Θα δημιουργήσουμε ένα animation φόρτωσης χρησιμοποιώντας μια κλάση CSS που μπορείτε να εφαρμόσετε σε σχεδόν οποιοδήποτε στοιχείο θέλετε (εντός του λόγου).

Αυτό σας δίνει μεγάλη ευελιξία να το χρησιμοποιήσετε και καθιστά τη λύση ωραία και απλή μόνο με CSS.

Ενώ το απόσπασμα είναι αρκετά μικρό και μπορείτε απλά να το αντιγράψετε και να το επικολλήσετε, θα σας καθοδηγήσω σε ό, τι συμβαίνει και ένα παράδειγμα χρήσης του δυναμικά κατά τη φόρτωση δεδομένων.

Θέλετε απλώς το απόσπασμα;

Μπορείτε να το πάρετε εδώ!

CSS Loading Animation CSS Loading Animation. GitHub Gist: κοινοποιήστε αμέσως κώδικα, σημειώσεις και αποσπάσματα. 262588213843476 Κύριο

Πρέπει να ξέρω πώς να κινούμαι πριν από αυτό το σεμινάριο;

Οχι! Θα εξετάσουμε λεπτομερώς τι ακριβώς πρέπει να κάνετε. Στην πραγματικότητα, το κινούμενο σχέδιο σε αυτό το σεμινάριο είναι σχετικά απλό, οπότε ας σκάψουμε!

Μέρος 1: Δημιουργία της κίνησης φόρτωσης

Αυτό το πρώτο μέρος θα επικεντρωθεί στο να συγκεντρωθούν τα κινούμενα σχέδια φόρτωσης και να το δουν σε έναν στατικό ιστότοπο HTML. Ο στόχος είναι να περπατήσετε στην πραγματικότητα δημιουργώντας το απόσπασμα. Θα χρησιμοποιήσουμε μόνο HTML και CSS για αυτό το μέρος.

Βήμα 1: Δημιουργία δείγματος περιεχομένου

Για να ξεκινήσετε, θα θέλαμε ένα μικρό δείγμα περιεχομένου. Δεν υπάρχει κανένας περιορισμός εδώ, μπορείτε να το δημιουργήσετε με βασικό HTML και CSS ή μπορείτε να το προσθέσετε στην εφαρμογή Δημιουργία αντίδρασης!

Για την πορεία, θα χρησιμοποιήσω HTML και CSS με μερικά παραδείγματα περιεχομένου που θα μας επιτρέψουν να το δούμε σε ισχύ.

Για να ξεκινήσετε, δημιουργήστε ένα νέο αρχείο HTML. Μέσα σε αυτό το αρχείο HTML, συμπληρώστε το με κάποιο περιεχόμενο που θα μας δώσει τη δυνατότητα να παίξουμε με την κινούμενη εικόνα μας. Θα χρησιμοποιήσω το fillerama που χρησιμοποιεί γραμμές από την αγαπημένη μου τηλεοπτική εκπομπή Futurama!

Αν πρόκειται να ακολουθήσετε μαζί μου, δείτε πώς φαίνεται το έργο μου:

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

Ακολουθήστε μαζί με τη δέσμευση!

Βήμα 2: Ξεκινώντας με μια κατηγορία φόρτωσης ιδρύματος

Για το ίδρυμά μας, ας δημιουργήσουμε μια νέα κατηγορία CSS. Μέσα στο αρχείο CSS, ας προσθέσουμε:

.loading { background: #eceff1; } 

Με αυτήν την τάξη, ας το προσθέσουμε σε μερικά ή όλα τα στοιχεία μας. Το πρόσθεσα σε μερικές παραγράφους, επικεφαλίδες και λίστες.

For example...

Αυτό μας δίνει ένα βασικό υπόβαθρο, αλλά πιθανότατα θα θέλαμε να κρύψουμε αυτό το κείμενο. Όταν φορτώνει, δεν θα έχουμε ακόμα αυτό το κείμενο, οπότε πιθανότατα θα θέλαμε να χρησιμοποιήσουμε κείμενο πλήρωσης ή σταθερό ύψος. Σε κάθε περίπτωση, μπορούμε να ρυθμίσουμε το χρώμα σε διαφανές:

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

Εάν παρατηρήσετε με στοιχεία λίστας, εάν εφαρμόσετε την κλάση στο στοιχείο λίστας ανώτερου επιπέδου (

    ή
      έναντι του ίδιου του στοιχείου λίστας (
    • ), μοιάζει με ένα μεγάλο μπλοκ. Εάν προσθέσουμε λίγο περιθώριο στο κάτω μέρος όλων των στοιχείων λίστας, μπορούμε να δούμε ένα διαφορετικό τρόπο εμφάνισης:

      li { margin-bottom: .5em; } 

      Και τώρα αρχίζει να έρχεται μαζί, αλλά μοιάζει με placeholder. Ας το κινούσουμε λοιπόν για να μοιάζει με φόρτωση.

      Ακολουθήστε μαζί με τη δέσμευση!

      Βήμα 3: Στυλ και κίνηση της τάξης φόρτωσης

      Πριν πραγματικά κινούμε την τάξη μας, χρειαζόμαστε κάτι για να κινούμαστε, οπότε ας προσθέσουμε μια κλίση στην .loadingτάξη μας :

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

      Αυτό σημαίνει ότι θέλουμε μια γραμμική κλίση που έχει κλίση στους 100 μοίρες, όπου ξεκινάμε #eceff1και ξεθωριάζουμε #f6f7f8στο 30% και πίσω #eceff1στο 70%.

      Είναι δύσκολο να το δεις αρχικά όταν είναι ακίνητο, μπορεί να μοιάζει με ένα έντονο φως στον υπολογιστή σου! Εάν θέλετε να το δείτε πριν προχωρήσετε, μη διστάσετε να παίξετε με τα παραπάνω χρώματα για να δείτε την κλίση.

      Τώρα που έχουμε κάτι να κινούμαστε, θα πρέπει πρώτα να δημιουργήσουμε έναν κανόνα βασικών καρέ:

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

      Αυτός ο κανόνας όταν εφαρμόζεται θα αλλάξει τη θέση του φόντου από το 100% του άξονα x σε 0% του άξονα x.

      Με τον κανόνα, μπορούμε να προσθέσουμε την ιδιότητα κινούμενης εικόνας στην .loadingτάξη μας :

      .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.

      Επιπλέον, αυτό δεν θα είναι τέλειο. Τις περισσότερες φορές, δεν θα γνωρίζετε ακριβώς πόσα αντίγραφα έχετε σε μια σελίδα. Ο στόχος είναι να προσομοιώσουμε και να υποδείξουμε ότι θα υπάρχει περιεχόμενο και ότι αυτή τη στιγμή φορτώνεται.

      Ποιο είναι το αγαπημένο σας animation φόρτωσης;

      Ενημερώστε με στο Twitter!

      Εγγραφείτε στη συνομιλία!

      Αν περιμένετε να φορτωθεί μια σελίδα, βοηθά να γνωρίζετε ότι κάτι λειτουργεί στο παρασκήνιο.

      Επομένως, θα πρέπει να δημιουργήσετε ένα ωραίο animation φόρτωσης για την εφαρμογή σας.

      Αυτός είναι ο λόγος για τον οποίο @colbyfayock έγραψε αυτόν τον οδηγό που σας δείχνει πώς να δημιουργήσετε αυτό το κινούμενο σχέδιο με καθαρό CSS.//t.co/h8hGwqZ3sl

      - freeCodeCamp.org (@freeCodeCamp) 24 Μαΐου 2020

      Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

      • ; Ακολούθησέ με στο τουίτερ
      • ; ️ Εγγραφείτε στο Youtube μου
      • ✉️ Εγγραφείτε στο Newsletter μου