Și salut din nou, astăzi vom crea o bară de încărcare sau cum este numit - ProgressBar. Și vom construi una dintre cele mai simple metode de utilizare HTML5. De fapt, bara de progres foarte poate fi folosit ori de câte ori este necesar indicator de finalizare a oricărei tranzacții ca procent (în sondaje, diagrame, etc.). Cu ajutorul CSS3 nu va fi complexitatea eliberării sale pe cont propriu. Și în cazul nostru, nu este necesar să se utilizeze o imagine care este, fără îndoială, un mare plus.
Eticheta are HTML5
Când introduceți codul de mai sus în HTML, veți vedea o bară de progres care este afișat în mod implicit, și cu stilurile de bază.
Dacă folosiți diferite sisteme de operare, este posibil să observați că barele de progres în ele sunt diferite.
Acum atribuie stiluri pentru propria bara de progres. Ca un selector în fișierul CSS, vom folosi tag-ul în sine progresul:
De exemplu, codul de mai sus elimină frontiera din bara de progres și de fundal gri face.
Acum, problemele încep)
Punct de vedere istoric sa întâmplat ca pentru diferite browsere - diverse selectoare. Prin urmare, pentru a afișa corect bara de progres în diferite browsere, ar trebui să utilizați un pseudo-selectori care sunt proiectate special pentru un anumit browser.
Pentru Safari și Chrome:
HTML
Următorul pas este de a crea o animație bara de progres. Deci, bara de progres este umplut de la stânga la dreapta. Aceasta este, începe atunci când valoarea = „0“ și se termină atunci când valoarea = „max“. De exemplu, luați în considerare următorul cod:
jQuery
Pentru a anima bara de progres se va utiliza biblioteca jQuery, astfel încât este necesar să se conecteze mai întâi:
Apoi, a scrie un script care, în esență, se va umple barul nostru progresie. În primul rând identificăm elementul care va fi umplut (aceasta este o bară de progres), în al doilea vom obține un maxim de progres bare de atribut max:
Apoi, creați o variabilă care va deține valoarea funcțiilor de animație:
În interiorul acestei funcții, vom crește umplerea bara de progres de către unul.
Și apoi atribuie o valoare valoarea atributului incrementată. Vom arăta, de asemenea, procentul din bara de descărcare de lângă progres:
Apoi, avem nevoie de o funcție care pornește funcția de animație de boot:
În acest moment descărcarea de animație este de lucru, dar valoarea va creste la infinit. Prin urmare, este necesar să se creeze condițiile în care animația să se oprească atunci când bara de progres este umplut complet, adică pentru a ajunge la maxim.
Vom stoca rezultatul în funcția de variabilă. Și în interiorul funcției de încărcare va scrie condiția:
Aici, pe aceasta și toate!) Simplu, nu-i așa? Sper ca acest tutorial a fost util pentru tine. Mult noroc!