Utilizarea animației de încărcare pe site-uri web și aplicații: exemple și fragmente de utilizat

La ce folosește o animație de încărcare pe un site web?

Una dintre problemele pe care fiecare dezvoltator web trebuie să le aibă în vedere este timpul de încărcare a paginii. Desigur, cu vitezele mai mari de internet pe care le avem în prezent, majoritatea paginilor și aplicațiilor se deschid destul de repede. Cu toate acestea, rămâne întotdeauna ceva spațiu pentru îmbunătățire.

În unele cazuri, este inevitabil să lăsați utilizatorii să aștepte un scurt moment pentru ca toate datele și paginile să se încarce. În astfel de momente, ai nevoie de ceva care să atragă atenția utilizatorilor și să-i țină pe site suficient de mult pentru a se încărca tot conținutul.

O modalitate de a face acest lucru este prin adăugarea unei animații de încărcare atrăgătoare sau a unui gif de încărcare pe site pentru a distra utilizatorii în timp ce așteaptă să se încarce restul site-ului.

De exemplu, chiar și pentru site-ul nostru web, folosim o animație de încărcare foarte simplă pentru a le informa utilizatorilor noștri că ceva se întâmplă în acest moment.

Să aruncăm o privire la aceste animații GIF de încărcare interesante.

• Se încarcă inspirația animațiilor
• Fragmente CSS și JavaScript gratuite pentru a crea încărcătoare animate

Se încarcă inspirația animațiilor

Am găsit unele dintre cele mai bune animații de încărcare și gif de încărcare și iată-le:

WIP animație orb

Acesta este un exemplu grozav de ecran de încărcare gif care vă atrage atenția suficient de mult pentru ca restul conținutului să se încarce. Înfățișează un cerc care se rotește înconjurat de un fum misterios pe care nu poți să nu-l urmărești pentru o clipă. Și un moment este cu adevărat tot ce este nevoie...

Se încarcă micro animație

Deoarece site-ul din spatele acestei animații de încărcare este o fabrică de bere, acest gif de încărcare are tot sensul din lume. Înfățișează procesul de producție al produselor de bere, ceea ce nu numai că va reduce frustrarea utilizatorilor care trebuie să aștepte ca pagina să se încarce, dar le va stârni interesul într-un mod creativ.

Avanti și înapoi loader

Acest gif animat de încărcare simplă este perfect pentru a atrage atenția utilizatorului prin transferarea pozițiilor graficelor într-o ordine corespunzătoare. Frumusețea acestei pictograme de încărcare constă în simplitatea ei. Este intuitiv și îi va menține ocupați pe utilizatori, în loc să-i lase să părăsească pagina frustrați.

Animație ecran de încărcare – Clepsidra

Acest gif animat de încărcare este grozav din două motive. Nota „Mulțumesc pentru răbdare” ajută la stabilirea unei comunicări cu utilizatorul și la obținerea unui anumit nivel de înțelegere. Preîncărcătorul de clepsidră, pe de altă parte, atrage atenția utilizatorului și îi face așteptarea mai confortabilă.

„bouncy” – animație de încărcare alb-negru 9

Cele mai bune lucruri sunt adesea cele mai simple și aceeași regulă se aplică și pentru animația de încărcare CSS. Deși acesta ar putea părea plictisitor pentru unii, este de fapt perfect în simplitatea sa. Și cel mai bun lucru este că nu te poți opri să te uiți la el.

Încărcător de topire

Acest gif de încărcare a animațiilor combină două elemente foarte eficiente atunci când vine vorba de a atrage atenția utilizatorului și de a face timpul de așteptare mai plăcut pentru acesta.

Folosește efectul fluid care seamănă cu topirea și ocupă imediat atenția utilizatorului și, în același timp, adaugă elemente liniștitoare precum linia strălucitoare pe care o poți vedea.

Încărcător de lucruri

Modelul de imbricare este întotdeauna o alegere bună atunci când vine vorba de încărcarea gif-urilor animate. Adăugați efectul 3D în amestec și aveți o animație de încărcare perfectă care merită creată!

Animație Preloadeer

Când proiectați animația de încărcare, gândiți-vă întotdeauna la publicul țintă și la ce ar dori să vadă. Acest site web a făcut o treabă grozavă în acest sens, combinând mai multe lucruri asociate cu Crăciunul și creând un gif de preîncărcare perfect pentru cursurile online adresate copiilor. Declanșarea unui răspuns emoțional cu utilizatorii dvs. este întotdeauna o idee bună dacă știți cum să o faceți corect.

Animație de încărcare

Cine a creat acest gif animat în așteptare a vrut să se asigure că ocupă atenția utilizatorului la mai multe niveluri diferite. Deci, în loc să creeze o animație simplă de încărcare, au optat pentru un model de afișare cu mai multe ecrane, care este atrăgător și trebuie să ocupe atenția utilizatorului pentru o perioadă. Adăugați efectele de rotație și culorile de gradient în amestec și veți crea niște ecrane de încărcare minunate.

Se încarcă ecranul vizual pentru aplicație

Acest gif cu bară de încărcare nu numai că își servește scopul, dar este și foarte cool și la modă. A fost proiectat pentru aplicația mobilă Android/iOS/web și combină globul care se rotește cu contrastele de culoare care creează un efect vizual interesant SF.

Se încarcă animația

Cea mai proastă modalitate de a crea un GIF de încărcare a imaginii este prin a crea ceva care nu are sens și nu spune deloc poveste. Utilizatorii nu vor să vadă asta; vor ceva care să creeze o legătură emoțională cu ei.

Imaginile de preîncărcare pe care le vedem aici sunt ideale pentru asta. Această animație de încărcare cu numere care se schimbă rapid și bare de culoare care se rotesc rapid îi permite utilizatorului să știe că site-ul este încărcat cât mai repede posibil și că problemele sunt procesate în fundal chiar atunci și acolo.

Fragmente CSS și JavaScript gratuite pentru crearea încărcătoarelor animate

Deși am avut șansa de a vedea câteva pagini de încărcare statică destul de interesante în trecut, adăugarea elementelor dinamice în amestec este întotdeauna o idee bună atunci când doriți să ocupați atenția utilizatorilor.

Să aruncăm o privire la această colecție de generatoare de gif de încărcare care vă va ajuta să creați animația de încărcare exact așa cum doriți.

Bară de încărcare cu contor

Vedeți Pen Loader de Nicolas Slatiner (@slatiner) pe CodePen.

Această bară de încărcare frumoasă a fost proiectată de Nicolas Slatiner și este o animație de încărcare intuitivă care afișează procentul de încărcare. Designul este curat și frumusețea sa constă în simplitate. Este un gif grozav cu bară de progres care s-ar potrivi perfect în orice site web.

Încărcător ușor

Vedeți Pen Pure Css Loader de la Just a random person (@mathdotrandom) pe CodePen.

Acest încărcător ușor în formă de spinner este o animație grozavă de încărcare cărora le plac modelele simple, cu puțină răsucire. Folosește forma starburst cuplată cu animații CSS3 pure pentru a crea un efect de încărcare gif care va ocupa imediat atenția utilizatorului.

Încărcător multi-animat

Acest cerc de încărcare gif creat de Glen Cheney este o caracteristică frumoasă și complexă care folosește

Câteva rânduri de JavaScript pentru a adăuga o funcție de afișare/ascundere, chiar dacă o puteți face să funcționeze chiar și fără această funcție. Aceasta înseamnă că poate fi rulat în CSS3 pur, cu multe opțiuni, inclusiv diferite culori, dimensiuni și viteză.

Canvas Fractal Loader

Vedeți Pen Canvas Simple Circle Loader de Jack Rugile (@jackrugile) pe CodePen.

Îți amintești de screensaver-ul Windows de școală veche? Acest gif cu pictogramă de încărcare a pânzei fractale în dungi se simte puțin. Folosește mult JavaScript și, deși este numit un element canvas, de fapt nu folosește un element canvas pe pagină.

De fapt, motivul pentru care se numește așa constă în faptul că este alimentat de Sketch.js, care este o bibliotecă naturală de pânză. Deci, dacă nu aveți nicio problemă cu a vă juca puțin cu JavaScript pe site-ul dvs., această animație de încărcare este una dintre alegerile grozave pentru dvs.

Încărcătoare OuroboroCSS

Vedeți Pen CSS Loader de Geoffrey Crofte (@CreativeJuiz) pe CodePen.

Încărcătoarele OuroboroCSS create de Geoffrey Crofte sunt alimentate de CSS pur și funcționează pe un ciclu de animație repetat care dă iluzia de a dispărea în formă.

Cu toate acestea, deși acest design este perfect pentru încărcătoarele interne, folosirea lui ca animație de încărcare a paginii întregi ar putea să nu fie cea mai bună mișcare, deoarece nu este suficient de puternic pentru a fi singur pe întreaga pagină.

Încărcător cu termometru

Când a proiectat acest încărcător personalizat în stil termometru, creatorul, Hugo Giraudel, a împins cu adevărat limitele CSS, cu această animație de încărcare care se deplasează printr-un număr de culori diferite de jos în sus. Animațiile sunt CSS pur și există doar 3 elemente HTML imbricate unul în celălalt.

Three.js Loader

Vedeți Pen Three.js Loader de Lennart Hase (@motorlatitude) pe CodePen.

Încărcătorul Three.js de Lennart Hase este un gif de încărcare atât de grozav încât a trebuit pur și simplu să-l adăugăm pe listă. Folosește biblioteca 3D gratuită Three.js pentru a crea un cub rotativ pe o suprafață mică pe care nu se poate să nu se uite în continuare.

Animația este controlată prin redarea JavaScript și WebGL. Având în vedere că designul 3D este una dintre cele mai tari noi tendințe în design web, adăugarea unor elemente 3D la animația de încărcare este întotdeauna o idee bună.

Cercul organic

Vedeți Pen Organic Circle Canvas Loader de Jack Rugile (@jackrugile) pe CodePen.

Acest impresionant încărcător de cerc canvas este construit în întregime pe elementul canvas HTML folosind apeluri ctx și JavaScript pentru a crea acest efect uimitor și atrăgător de la zero. Acesta nu este un cerc de încărcare care ar putea fi ușor încorporat în orice site web, dar trebuie să recunoașteți că a meritat să îl vedeți.

Rotator cerc simplu

Vedeți încărcătorul infinit Pen Canvas de la MRU (@ruffiem) pe CodePen.

Dacă doriți un încărcător de pânză simplu, frumos, dar cu adevărat eficient, acesta ar putea fi alegerea potrivită pentru dvs. Rotește cercul interior al unui element canvas la infinit, cu un JavaScript de bază controlând animația. Unul dintre cele mai bune lucruri despre modelele simple și elegante, cum ar fi acesta, este faptul că pot fi încorporate cu ușurință în orice site fără a fi perturbatoare sau copleșitoare.

Pure CSS Loader Dots

Vedeți punctele Pen Loader de Dave DeSandro (@desandro) pe CodePen.

Dacă sunteți în căutarea unui încărcător CSS pur, această animație de încărcare CSS cool și distractivă merită cu siguranță luată în considerare. Este simplu de configurat, atrăgător și distractiv de privit. Un alt mare plus este că poate fi încorporat cu ușurință în orice site web și își servește scopul de a o animație grozavă de încărcare. Formele de puncte și animațiile rulează prin CSS și nu este necesar JavaScript.

LoaderView glisant pătrat

Acest încărcător pătrat glisant face așteptarea puțin mai puțin frustrantă, deoarece vă menține ochiul în mișcare împreună cu pătratele. O soluție excelentă pentru companiile care vând electronice sau jocuri online pentru a-și menține vizitatorii implicați cu site-ul web.

DotsLoaderView

Bilele negre care săritură care apar de nicăieri și dispar servesc ca element de divertisment și ar putea fi folosite pentru site-uri web care doresc să arate prezentabil, dar cu un vârf de jucăuș.

Încărcător de viteze neclare

Vedeți Pen Blurred Gear Loader de Joni Trythall (@jonitrythall) pe CodePen.

Un încărcător cu roți dințate neclare cu cele trei roți dințate care se învârtează întruchipează mișcarea și complexitatea și ar putea fi potrivit pentru companiile care comercializează mașini sau piese mecanice.

CSS Stairs Loader

Vedeți Pen CSS Stairs Loader de Irko Palenius (@ispal) pe CodePen.

Încărcătorul scărilor care coboară și urcă cu o minge albă care sare deasupra are un design minimalist, dar este foarte simplu. Ar putea avea sens pentru afacerile care doresc să se prezinte ca serioase și demne de încredere.

Pen de încărcare

Vedeți Pen ZbVVwa de Dave McCarthy (@AsLittleDesign) pe CodePen.

Cu o notă ușoară de simplitate, cercurile colorate asemănătoare omidelor care se mișcă la stânga sau la dreapta și vin câte unul pe fiecare parte fac încărcarea mai puțin plictisitoare pentru vizitatori. Încărcătorul este potrivit pentru aproape orice tip de afaceri cu animația sa universală și ar trebui să-i distreze pe vizitatori în timp ce așteaptă să ajungă pe pagina de pornire.

Încărcător CSS

Vedeți Pen Loader css3 de Mathieu Richard (@MathieuRichard) pe CodePen.

Un simplu încărcător „de atragere a atenției” precum acest cub rulant, care devine mai mare atunci când merge înainte și revine la forma sa inițială când se întoarce, este o soluție rezervată pentru afaceri care doresc să pară inteligentă și sofisticată pentru vizitator.

Spinner CSS3 viu

Vedeți Pen Vivid CSS3 Spinner de Kevin Jannis (@kevinjannis) pe CodePen.

Încărcătorul cu spinner viu cu curcubeul rotativ care se rostogolește într-un fel de formă geometrică asemănătoare unei flori îi poate înveseli pe vizitatori și îi poate ajuta să se pregătească pentru ceva distractiv și incitant. Un astfel de încărcător ar putea fi folosit pentru companiile care își comercializează produsele sau serviciile către copii. Ar trebui să funcționeze bine pentru site-urile de educație pentru copii

Ecran de încărcare Prism

Vedeți ecranul de încărcare Pen Prism de Ken Chen (@kenchen) pe CodePen.

Ecranul de încărcare a prismei ar trebui să amintească de fundalul LinkedIn pentru fotografii. Încărcătorul de la distanță arată ca niște constelații care se mișcă în spațiu, cu elementul principal în mijloc, care ar putea prezenta un logo corporativ. Încărcătorul ar putea fi folosit pentru afaceri care lucrează cu clienți internaționali, de exemplu în sectorul B2B.

Încărcător

Vedeți Pen Loader de Alex Rutherford (@Ruddy) pe CodePen.

Îți place varietatea? Iată încărcătorul care distrează un vizitator, permițându-i să vadă o numărătoare inversă însoțită de modificarea animației diferitelor imagini. Rețineți că acest încărcător poate avea orice imagine care se rotește, astfel încât să se potrivească nevoilor oricărei afaceri.

Încărcător de redirecționare

Vedeți încărcătorul de redirecționare a stiloului de la Mr Alien (@mr_alien) pe CodePen.

Iată o silueta unui bărbat cu un jetpack pe spate zburând cât de repede poate. Un astfel de încărcător care redirecționează un utilizator către pagina următoare poate fi folosit de aproape orice companie, în special de cele care ar dori să evidențieze elementul de viteză al serviciului lor.

Puncte de încărcare Codepen

Având un design minimalist și succint, acest preîncărcător de puncte ar putea fi folosit de oameni artistici sau designeri pentru portofoliile lor online, de exemplu.

Animație de preîncărcare

Vedeți animația SVG Pen Preloader de Jason Miller (@imjasonmiller) pe CodePen.

Nu ar trebui acest preîncărcare să amintească de jocul șarpelui? Această animație de pictogramă de energie cu priză poate avea sens pentru furnizorii de internet sau pentru orice alte agenții care ajută companiile și clienții să colaboreze.

SVG ∞ Loader

Vedeți încărcătorul Pen SVG ∞ (fără JS, cross-browser, cod minim) de Ana Tudor (@thebabydino) pe CodePen.

Fără JS, cross-browser, cod minim. 20 de linii de CSS și 4 linii de SVG generat.

Încărcător de roșii cu vars CSS

Vedeți încărcătorul de roșii Pen cu variante CSS (fără suport Edge) de Ana Tudor (@thebabydino) pe CodePen.

Nu funcționează în Edge din cauza lipsei de suport pentru calc() ca valoare de întârziere a animației.

Flippreloader animat

Vedeți Pen Animated FlipPreloader – SCSS de Animated Creativity (@animatedcreativity) pe CodePen.

Un flip preloader minunat realizat în CSS. Culorile sunt complet logice pe flip. Orice culoare poate fi setata cu usurinta.

SpinKit

Încărcare simplă învârtitoare animate cu CSS. Vezi demonstrația. SpinKit folosește animații CSS accelerate hardware (traducere și opacitate) pentru a crea animații fluide și ușor de personalizat.

CSS-Spinner

Colecție de 12 spinneri CSS puri, mici și eleganti pentru animația de încărcare a site-ului dvs. web.

Întrebări frecvente despre încărcarea animației

1. Ce este o animație de încărcare și care este scopul acesteia?

Când un utilizator așteaptă încărcarea materialului, o animație de încărcare îi arată ce se întâmplă în culise. Funcția sa este de a oferi utilizatorului o confirmare vizuală că sistemul gestionează o solicitare și de a ajuta la înțelegerea funcționării sistemului chiar și atunci când aceasta nu este imediat evidentă. Prin crearea ideii că materialul se va încărca în cele din urmă, încărcarea animațiilor poate ajuta, de asemenea, la reducerea supărării utilizatorilor.

2. Cum ajută încărcarea animațiilor să îmbunătățească experiența utilizatorului pe un site web sau pe o aplicație?

Prin reducerea nivelului de agravare experimentat de utilizatori în timp ce așteaptă încărcarea conținutului, încărcarea animațiilor poate contribui la îmbunătățirea experienței utilizatorului. De asemenea, pot arăta utilizatorului o indicație vizuală că sistemul funcționează și gestionează cererea acestuia. Încărcarea animațiilor poate ajuta la menținerea interesului utilizatorilor față de informațiile pe care le așteaptă, ținându-i informați despre ceea ce se întâmplă în fundal.

3. Care sunt câteva exemple de diferite tipuri de animații de încărcare?

Barele de progres, rotativele, animațiile pulsatile și ecranele schelet sunt câteva exemple ale diferitelor tipuri de animații de încărcare. Aplicațiile web folosesc frecvent bare de progres și rotative pentru a arăta că o solicitare este procesată de sistem. Aplicațiile mobile folosesc frecvent animații pulsatoare pentru a le informa utilizatorilor că ceva se întâmplă în fundal. Ecranele scheletice sunt folosite pentru a oferi utilizatorului o previzualizare a conținutului care va fi afișat pe măsură ce se încarcă.

4. Cum creez o animație de încărcare care este atât atrăgătoare din punct de vedere vizual, cât și funcțională?

Scopul animației și așteptările utilizatorului ar trebui să fie luate în considerare atunci când se creează o animație de încărcare. Atractia vizuală a unei animații de încărcare nu ar trebui să diminueze conținutul care este încărcat. De asemenea, ar trebui să fie util, oferind utilizatorului feedback fără ambiguitate asupra modului în care decurge procedura. Performanța animației ar trebui, de asemenea, ajustată, deoarece utilizatorii pot deveni nerăbdători și iritați cu animațiile cu încărcare lentă.

5. Cât timp ar trebui să fie afișată o animație de încărcare înainte ca conținutul să fie încărcat?

Complexitatea conținutului este încărcată, iar viteza conexiunii la internet a utilizatorului determină cât timp ar trebui să fie afișată o animație de încărcare. O regulă decentă este să păstrați animația pe ecran timp de cel mult cinci secunde, deoarece utilizatorii pot deveni nerăbdători cu timpi mai lungi de încărcare. Dar, este esențial să găsiți un echilibru între acest lucru și să vă asigurați că materialul s-a încărcat suficient de bine pentru a oferi o experiență pozitivă pentru utilizator.

6. Cum mă pot asigura că animația mea de încărcare este accesibilă utilizatorilor cu dizabilități?

Respectarea regulilor de accesibilitate, cum ar fi oferirea unui limbaj alternativ pentru imagini și asigurarea faptului că animațiile nu provoacă convulsii la utilizatorii cu epilepsie, vă va ajuta să vă asigurați că o animație de încărcare este accesibilă persoanelor cu dizabilități. De asemenea, este crucial să se garanteze că utilizatorul are capacitatea de a întrerupe sau opri animația în orice moment.

7. Care sunt cele mai bune practici pentru utilizarea animațiilor de încărcare pe un site web sau pe o aplicație?

Când folosiți încărcarea animațiilor pe un site web sau pe o aplicație, este important să le păstrați clare și lipsite de ambiguitate, să le folosiți cu moderație și să oferiți utilizatorilor feedback cu privire la modul în care decurge procesul. De asemenea, este esențial să verificați dacă animația este accesibilă utilizatorului și a fost optimizată pentru performanță.

8. Animațiile de încărcare pot fi personalizate pentru a se potrivi cu branding-ul site-ului sau aplicației mele?

Absolut, animațiile de încărcare pot fi modificate pentru a se potrivi cu identitatea unui site web sau a unei aplicații. Acest lucru poate sprijini identitatea mărcii și poate ajuta utilizatorii să aibă o experiență vizuală consistentă. Dar, este esențial să găsiți un echilibru între branding și utilizare, asigurându-vă că animația oferă feedback clar asupra stării procesului și nu distrage atenția de la materialul care este încărcat.

9. Cum pot măsura eficiența animației mele de încărcare în ceea ce privește îmbunătățirea experienței utilizatorului?

Este esențial să obțineți contribuția utilizatorului, cum ar fi prin sondaje sau testarea utilizatorilor, pentru a determina cât de bine îmbunătățește o animație de încărcare experiența utilizatorului. Feedback-ul utilizatorului poate fi folosit pentru a evalua cât de bine comunica animația starea procesului și dacă ușurează supărarea utilizatorului în timpul perioadelor lungi de încărcare. Pentru a determina modul în care animația de încărcare afectează implicarea utilizatorilor, este, de asemenea, esențial să monitorizați date precum rata de respingere și durata sesiunii.

10. Care sunt unele greșeli comune de evitat atunci când proiectați o animație de încărcare?

În timpul creării unei animații de încărcare, capcanele obișnuite de evitat includ folosirea de animații care distrag atenția, nu oferirea de feedback cu privire la progresul procesului și utilizarea animațiilor care sunt prea lungi. De asemenea, este esențial să verificați dacă animația este optimizată pentru performanță și accesibilă tuturor utilizatorilor. Pentru a garanta că animația funcționează pentru toți utilizatorii, este, de asemenea, crucial să o testați pe o varietate de dispozitive și conexiuni la internet.

Încheierea gândurilor despre utilizarea animației de încărcare pe site-uri web

Când proiectați un site web, trebuie să țineți cont de fiecare mic detaliu. A avea un site minunat este inutil dacă timpul de încărcare este prea lung și jumătate dintre utilizatori renunță chiar înainte de a avea șansa de a vă vedea site-ul.

Pentru a evita ca acest lucru să se întâmple, ar trebui să încorporați animații interesante în site-ul dvs. și să ocupați atenția utilizatorului atât timp cât este necesar, până când restul conținutului se încarcă. Fii creativ și proiectează un gif amuzant de așteptare pe care fiecare utilizator ar fi bucuros să îl vadă.

Sperăm că v-a plăcut acest articol creat de echipa de la Amelia, probabil cel mai bun plugin de programare de întâlniri pentru WordPress.

Ar trebui să îl verificați pe acesta pe aspectul site-ului.

De asemenea, am scris despre câteva subiecte conexe, cum ar fi design web modern, design de layout, site-uri web proaste, design de butoane, design vizual, cele mai bune pagini 404 vreodată, tendințe de design web și fundal întunecat.