Dacă ați fost în jurul internetului în ultima vreme, cel mai probabil ați văzut o animație de încărcare subtilă plină care umple conținutul paginii înainte de a încărca cu grație.

Unii dintre uriașii sociali precum Facebook folosesc chiar această abordare pentru a oferi încărcării paginilor o experiență mai bună. Cum putem face asta doar cu câteva CSS simple?

  • Ce vom construi?
  • Vrei doar fragmentul?
  • Partea 1: Crearea animației noastre de încărcare
  • Partea 2: Utilizarea animației noastre de încărcare într-o aplicație dinamică

Ce vom construi?

Vom crea o animație de încărcare utilizând o clasă CSS pe care o puteți aplica la aproape orice element doriți (în mod rezonabil).

Cum sa utilizati CSS pur pentru a crea o animatie
Se încarcă previzualizarea animației

Acest lucru vă oferă o mare flexibilitate de utilizare și face soluția plăcută și simplă doar cu CSS.

Deși fragmentul este destul de mic și îl puteți copia și lipi, vă voi prezenta ce se întâmplă și un exemplu de utilizare dinamică la încărcarea datelor.

Vrei doar fragmentul?

O poți lua aici!

Animație de încărcare CSS
Animație de încărcare CSS. GitHub Gist: partajați instantaneu cod, note și fragmente.
Cum sa utilizati CSS pur pentru a crea o animatie

Trebuie să știu cum să anim înainte de acest tutorial?

Nu! Vom parcurge în detaliu exact ce trebuie să faceți. De fapt, animația din acest tutorial este relativ simplă, așa că haideți să intrăm!

Partea 1: Crearea animației noastre de încărcare

Această primă parte se va concentra pe obținerea împreună a animației de încărcare și vizualizarea acesteia pe un site web static HTML. Scopul este de a trece prin crearea de fapt a fragmentului. Pentru această parte vom folosi doar HTML și CSS.

Pasul 1: Crearea unui eșantion de conținut

Pentru a începe, ne vom dori un mic eșantion de conținut. Nu există restricții aici, puteți crea acest lucru cu HTML și CSS de bază sau îl puteți adăuga în aplicația Create React!

Pentru parcurs, voi folosi HTML și CSS cu câteva exemple de conținut care ne vor permite să vedem acest lucru în vigoare.

Pentru a începe, creați un fișier HTML nou. În interiorul acelui fișier HTML, umpleți-l cu un conținut care ne va oferi posibilitatea de a juca cu animația noastră. O să folosesc fillerama care folosește replici din emisiunea mea TV preferată Futurama!

Cum sa utilizati CSS pur pentru a crea o animatie
Pagină web statică HTML și CSS cu conținut de la fillerama.io

Dacă veți urma împreună cu mine, iată cum arată proiectul meu:

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

Urmați împreună cu comiterea!

Pasul 2: Începând cu o clasă de încărcare a fundației

Pentru fundația noastră, să creăm o nouă clasă CSS. În fișierul nostru CSS, să adăugăm:

.loading {
  background: #eceff1;
}

Cu acea clasă, să o adăugăm la câteva sau la toate elementele noastre. L-am adăugat la câteva paragrafe, titluri și liste.

<p class="loading">For example...
1611951849 818 Cum sa utilizati CSS pur pentru a crea o animatie
Pagină web statică HTML și CSS cu un fundal gri pentru conținut

Aceasta ne oferă un fundal de bază, dar probabil că am vrea să ascundem textul respectiv. Când se încarcă, nu vom avea încă textul respectiv, așa că cel mai probabil am dori să folosim textul de umplere sau o înălțime fixă. Oricum, putem seta culoarea la transparentă:

.loading {
  color: transparent;
  background: #eceff1;
}
1611951849 968 Cum sa utilizati CSS pur pentru a crea o animatie
Pagină web statică HTML și CSS cu fundal gri și culoare transparentă pentru conținut

Dacă observați cu elemente de listă, dacă aplicați clasa la elementul de listă de nivel superior (<ol> sau <ul>) vs elementul listei în sine (<li>), pare un bloc mare. Dacă adăugăm o mică marjă în partea de jos a tuturor elementelor listei, putem vedea o diferență în modul în care se afișează:

li {
  margin-bottom: .5em;
}
1611951849 95 Cum sa utilizati CSS pur pentru a crea o animatie
Diferența de stil între aplicarea la lista de nivel superior sau elementele listei

Și acum începe să se reunească, dar arată cam ca niște substituenți. Deci, să animăm acest lucru pentru a arăta că se încarcă de fapt.

Urmați împreună cu comiterea!

Pasul 3: Stilul și animarea clasei noastre de încărcare

Înainte de a ne anima de fapt cursul, avem nevoie de ceva de animat, așa că haideți să adăugăm un gradient pentru al nostru .loading clasă:

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

Aceasta înseamnă că vrem un gradient liniar asta este înclinat la 100 de grade, de unde începem #eceff1 și se estompează la #f6f7f8 la 30% și înapoi la #eceff1 la 70%;

1611951849 120 Cum sa utilizati CSS pur pentru a crea o animatie
Fundal subtil de gradient care ar putea arăta ca o strălucire

Este greu de văzut inițial când este încă, s-ar putea să arate doar ca o strălucire pe computer! Dacă doriți să o vedeți înainte de a merge mai departe, nu ezitați să vă jucați cu culorile de mai sus pentru a vedea gradientul.

Acum, că avem ceva de animat, va trebui mai întâi să creăm un cadre cheie regulă:

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

Această regulă atunci când este aplicată va schimba poziția de fundal de la 100% din axa x la 0% din axa x.

Cu regula, putem adăuga animaţie proprietatea noastră .loading clasă:

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

Linia noastră de animație setează cadrul cheie la loading, spunându-i să dureze 1,2 secunde, setând funcția de sincronizare la ease-in-out pentru a-l face neted și spune-i să se bucle pentru totdeauna infinite.

1611951849 120 Cum sa utilizati CSS pur pentru a crea o animatie
Nici o schimbare – nu animă

Dacă observați, totuși, după ce ați salvat asta, tot nu face nimic. Motivul pentru acest lucru este că ne setăm gradientul de la un capăt al elementului DOM la celălalt, deci nu mai este unde să te miști!

Deci, să încercăm și să setăm un background-size pe al nostru .loading clasă.

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

Acum, din moment ce fundalul nostru se extinde dincolo de elementul nostru DOM (nu puteți vedea acea parte), are ceva spațiu cu care să animați și obținem animația noastră!

1611951849 546 Cum sa utilizati CSS pur pentru a crea o animatie
Animația noastră de încărcare!

Urmați împreună cu comiterea!

Partea 2: Utilizarea animației noastre de încărcare într-o aplicație dinamică

Acum că avem animația de încărcare, să o punem în acțiune cu un exemplu de bază în care falsificăm o stare de încărcare.

Trucul cu utilizarea efectivă a acestui fapt este de obicei că nu avem conținutul real disponibil, așa că, în majoritatea cazurilor, trebuie să-l falsificăm.

Pentru a vă arăta cum putem face acest lucru, vom construi un simplu Reacţiona aplicație cu Next.js.

Pasul 1: Crearea unui exemplu React app cu Next.js

Navigați la directorul în care doriți să creați noul proiect și rulați:

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

Vă va solicita câteva opțiuni, în special un nume care va determina directorul în care este creat proiectul și tipul de proiect. eu folosesc my-css-loading-animation-dynamic și „Aplicația inițială implicită”.

1611951849 47 Cum sa utilizati CSS pur pentru a crea o animatie
Crearea unui nou proiect cu Next.js

Odată instalat, navigați în noul dvs. director și porniți serverul de dezvoltare:

cd [directory]
yarn dev
# or 
npm run dev
1611951849 788 Cum sa utilizati CSS pur pentru a crea o animatie
Se pornește serverul de dezvoltare cu Next.js

Apoi, să înlocuim conținutul din pages/index.js fişier. Voi extrage conținutul din exemplul anterior, dar îl vom crea similar cu modul în care ne-am putea aștepta să provină dintr-un API. Mai întâi, să adăugăm conținutul nostru ca obiect deasupra declarației noastre de returnare:

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?`
  ]
}

Pentru a afișa conținutul respectiv, în interior <main>, să înlocuim conținutul cu:

<main>
  <h1>{ content.header }</h1>
  <p>{ content.intro }</p>
  <ul>
    { content.list.map((item, i) => {
      return (
        <li key={i}>{ item }</li>
      )
    })}
  </ul>
</main>

Și pentru stiluri, puteți copia și lipi totul din partea noastră 1 main.css fișier în <style> etichete în partea de jos a paginii noastre index. Asta ne va lăsa cu:

1611951849 192 Cum sa utilizati CSS pur pentru a crea o animatie
Conținut de bază cu Next.js

Cu aceasta, ar trebui să ne întoarcem la un punct similar la care am terminat în partea 1, cu excepția faptului că nu folosim în mod activ niciuna dintre animațiile de încărcare.

Urmați împreună cu comiterea!

Pasul 2: falsificarea încărcării datelor dintr-un API

Exemplul cu care lucrăm este destul de simplu. Probabil că veți vedea acest lucru pre-generat static, dar acest lucru ne ajută să creăm o demonstrație realistă cu care să putem testa animația de încărcare.

Pentru a ne falsifica starea de încărcare, vom folosi React useState, useEffect, și de modă veche setTimeout pentru a preîncărca o parte din „încărcarea” conținutului și după setTimeout finalizează, actualizați conținutul respectiv cu datele noastre reale. Între timp, vom ști că suntem într-o stare de încărcare cu o instanță separată de useState.

În primul rând, trebuie să importăm dependențele noastre. În partea de sus a noastră pages/index.js fișier, adăugați:

import { useState, useEffect } from 'react';

Deasupra noastră content obiect, să adăugăm o stare:

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

Și în conținutul nostru, putem actualiza instanțele pentru a utiliza acea stare:

<h1>{ contentState.header }</h1>
<p>{ contentState.intro }</p>
<ul>
  { contentState.list.map((item, i) => {
    return (
      <li key={i}>{ item }</li>
    )
  })}
</ul>

Odată ce salvați și încărcați acest lucru, veți observa mai întâi că vom primi o eroare deoarece a noastră list proprietatea noastră nu există contentState, deci mai întâi putem remedia asta:

{ Array.isArray(contentState.list) && contentState.list.map((item, i) => {
  return (
    <li key={i}>{ item }</li>
  )
})}

Și după ce este gata, să adăugăm al nostru setTimeout în interiorul unui useEffect cârlig pentru a simula încărcarea datelor noastre. Adăugați acest sub content obiect:

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

Odată ce salvați și deschideți browserul, veți observa că timp de 2 secunde nu aveți conținut și apoi se încarcă, simulând practic încărcarea acestor date în mod asincron.

Urmați împreună cu comiterea!

Pasul 3: Adăugarea animației noastre de încărcare

Acum putem adăuga în sfârșit animația noastră de încărcare. Deci, pentru a face acest lucru, vom folosi starea de încărcare pe care am configurat-o folosind useState iar dacă conținutul se încarcă, adăugați-ne .loading elementelor noastre.

Înainte de a face acest lucru, în loc să adăugați individual această clasă la fiecare element din DOM, ar putea avea mai mult sens să faceți acest lucru folosind CSS și să adăugați clasa la părinte, așa că haideți să facem asta mai întâi.

Mai întâi, actualizați fișierul .loading clasa pentru a viza elementele noastre:

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

Apoi ne putem adăuga dinamic clasa la clasa noastră <main> etichetă:

<main className={loadingState ? 'loading' : ''}>

Notă: dacă utilizați Sass, vă puteți gestiona stilurile de încărcare prin extinzându-se .loading clasa în cazurile în care doriți să o utilizați sau să creați un substituent și extindeți asta!

Și dacă reîmprospătați pagina, veți observa că este încă doar o pagină goală timp de 2 secunde!

Problema este că atunci când încărcăm conținutul nostru, nu există nimic în interiorul etichetelor noastre care să permită înălțimea liniei elementelor să-i dea o înălțime.

1611951849 628 Cum sa utilizati CSS pur pentru a crea o animatie
Fără înălțime atunci când nu există conținut

Dar putem rezolva asta! Pentru că a noastră .loading clasa ne setează textul la transparent, putem adăuga pur și simplu cuvântul Loading pentru fiecare conținut:

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

Notă: nu putem folosi un spațiu gol aici, deoarece numai acesta nu ne va oferi o înălțime atunci când este redat în DOM.

Și odată ce salvați și reîncărcați pagina, primele noastre 2 secunde vor avea o stare de încărcare care reflectă conținutul nostru!

1611951849 587 Cum sa utilizati CSS pur pentru a crea o animatie
Animație de încărcare HTML și CSS

Urmați împreună cu comiterea!

Câteva gânduri suplimentare

Această tehnică poate fi utilizată destul de larg. Fiind o clasă CSS, este frumos și ușor să adăugați acolo unde doriți.

Dacă nu sunteți un fan al setării Loading text pentru starea de încărcare, o altă opțiune este să setați o înălțime fixă. Singura problemă este că necesită mai multă întreținere pentru modificarea CSS pentru a se potrivi cu aspectul încărcării conținutului.

În plus, acest lucru nu va fi perfect. Cel mai adesea, nu veți ști exact cât de mult aveți pe o pagină. Scopul este de a simula și a sugera că va exista conținut și că se încarcă în prezent.

Care este animația ta de încărcare preferată?

Anunță-mă Stare de nervozitate!

Alăturați-vă conversației!