Share
Nimic pe web nu se întâmplă instantaneu. Singura diferență este în timpul necesar pentru finalizarea unui proces. Unele procese se pot întâmpla în câteva milisecunde, în timp ce altele pot dura până la câteva secunde sau minute. De exemplu, este posibil să editați o imagine foarte mare încărcată de utilizatori, iar acest proces poate dura ceva timp. În astfel de cazuri, este o idee bună să lăsați vizitatorii să știe că site-ul web nu este blocat undeva, dar de fapt lucrează la imaginea dvs. și face unele progrese.
Una dintre cele mai comune metode de a arăta cititorilor cât de mult a progresat un proces este de a folosi bare de progres. În acest tutorial, veți învăța cum să utilizați biblioteca ProgressBar.js pentru a crea diferite bare de progres cu forme simple și complexe.
Odată ce ați inclus biblioteca în proiect, este ușor să creați o bara de progres folosind această bibliotecă. ProgressBar.js este acceptat în toate browserele majore, inclusiv IE9 +, ceea ce înseamnă că îl puteți utiliza în orice site pe care îl creați cu încredere. Puteți obține cea mai recentă versiune a bibliotecii de la GitHub sau puteți folosi direct o legătură CDN pentru ao adăuga în proiect.
Pentru a evita orice comportament neașteptat, asigurați-vă că containerul barei de progres are același raport de aspect ca și bara de progres. În cazul unui cerc, raportul de aspect al containerului ar trebui să fie 1: 1 deoarece lățimea va fi egală cu înălțimea. În cazul semicercului, raportul de aspect al containerului ar trebui să fie 2: 1 deoarece lățimea va fi dublă față de înălțime. În mod similar, în cazul unei linii simple, containerul trebuie să aibă un raport de aspect de 100: strokeWidth pentru linie.
Când creați bare de progres cu o linie, un cerc sau un semicerc, puteți folosi pur și simplu ProgressBar.Shape () pentru a crea bara de progres. În acest caz, Formă poate fi a Cerc, Linia, sau Semicerc. Puteți trece doi parametri la Formă() metodă. Primul parametru este un selector sau un nod DOM pentru a identifica containerul barei de progres. Al doilea parametru este un obiect cu perechi cheie-valoare care determină aspectul barei de progres.
Puteți specifica culoarea barei de progres folosind culoare proprietate. Orice bara de progres pe care o creați va avea în mod implicit o culoare gri închis. Grosimea barei de progres poate fi specificată folosind strokeWidth proprietate. Ar trebui să rețineți că lățimea de aici nu este în pixeli, ci în ceea ce privește un procentaj din dimensiunea pânzei. De exemplu, dacă panza are o lățime de 200px, a strokeWidth valoarea de 5 va crea o linie care are o grosime de 10px.
Pe lângă bara principală de progres, biblioteca vă permite, de asemenea, să trageți o linie de tracțiune care va afișa cititorilor calea pe care se va muta bara de progres. Culoarea liniei de traseu poate fi specificată utilizând trailColor proprietății și lățimea sa pot fi specificate folosind trailWidth proprietate. Ca și cum strokeWidth, trailWidth proprietatea calculează și lățimea în procente.
Timpul total necesar pentru bara de progres pentru a trece de la starea sa inițială la starea finală poate fi specificat folosind durată proprietate. Implicit, o bară de progres va finaliza animația în 800 de milisecunde.
Puteți utiliza funcția easing proprietate pentru a specifica modul în care o bara de progres ar trebui să se miște în timpul animației. Toate barele de progres se vor deplasa cu a liniar viteza implicită. Pentru a face animația mai atrăgătoare, puteți seta această valoare la altceva easeIn, easeOut, easeInOut, sau sări.
După ce specificați valorile inițiale ale parametrilor, puteți anima barele de progres folosind anima() metodă. Acest parametru acceptă trei parametri. Primul parametru este suma până la care doriți să animați linia progresului. Alți doi parametri sunt opționali. Al doilea parametru poate fi utilizat pentru a suprascrie orice valoare de proprietate a animației pe care ați setat-o în timpul inițializării. Al treilea parametru este o funcție de apel invers pentru a face altceva când animația se termină.
În exemplul următor, am creat trei bare de progres diferite utilizând toate proprietățile pe care le-am discutat până acum.
Accentsconagua
var lineBar = noua linie ProgressBar.Line ('# line-container', culoare: 'orange', strokeWidth: 2, trailWidth: 0.5); lineBar.animate (1, durata: 1000); var circleBar = ProgressBar.Circle nou ('# cerc-container', culoare: 'alb', strokeWidth: 2, trailWidth: 10, trailColor: 'negru', relaxare: 'easeInOut'); circleBar.animate (0,75, durata: 1500); var semiBar = nou ProgressBar.SemiCircle ('# semi-container', culoare: 'violet', strokeWidth: 2, trailWidth: 0.5, relaxing: 'bounce'); semiBar.animate (1, durata: 3000);Singurul lucru care se schimbă odată cu animarea barelor de progres din exemplul de mai sus este lungimea lor. Cu toate acestea, ProgressBar.js vă permite, de asemenea, să modificați alte atribute fizice, cum ar fi lățimea și culoarea liniei de lovire. În astfel de cazuri, va trebui să specificați valorile inițiale pentru bara de progres din interiorul din parametru și valorile finale din interiorul lui la parametru la inițializarea barelor de progres.
De asemenea, puteți spune bibliotecii să creeze un element de text însoțitor împreună cu bara de progres pentru a afișa câteva informații textuale utilizatorilor dvs. Textul poate fi orice, de la o valoare statică la o valoare numerică care indică progresul animației. text parametrul va accepta un obiect ca valoare.
Acest obiect poate avea a valoare pentru a specifica textul inițial care trebuie afișat în interiorul elementului. De asemenea, puteți furniza un nume de clasă care să fie adăugat elementului text folosind numele clasei parametru. Dacă doriți să aplicați anumite stiluri inline elementului text, le puteți specifica toate ca o valoare a elementului text stil parametru. Toate stilurile implicite pot fi eliminate prin setarea valorii stil la nul. Este important să rețineți că valorile implicite se aplică numai dacă nu ați setat o valoare personalizată pentru nici o proprietate CSS în interiorul acesteia stil.
Valoarea din interiorul elementului text va rămâne aceeași pe întreaga animație, dacă nu o actualizați singuri. Din fericire, ProgressBar.js oferă, de asemenea, o Etapa care poate fi folosit pentru a defini o funcție care trebuie apelată cu fiecare pas de animație. Deoarece această funcție va fi apelată de mai multe ori în fiecare secundă, trebuie să fiți atenți la utilizarea acesteia și să păstrați calculele simple în interior.
var lineBar = noua linie ProgressBar.Line ("# line-container", strokeWidth: 4, trailWidth: 0.5, de la: color: "# FF9900", la: color: "# 00FF99" : '0', clasa: 'progress-text', stil: culoare: 'negru', pozitie: 'absolute', top:'-30px ' : (stare, forma) => shape.path.setAttribute ("cursa", state.color); shape.setText (Math.round (form.value () * 100) + '%'); lineBar.animate (1, durata: 4000); var circleBar = ProgressBar.Circle nou ("# cerc-container", culoare: "alb", strokeWidth: 2, trailWidth: 25, trailColor: "negru", relaxing: "easeInOut", from: ", lățime: 1, la: color:" # FF0099 ", lățimea: 25 text: value: 0, className: progress-text style: color: 'absolut', top: '45% ', stânga: '42%', umplutură: 0, margine: 0, transformare: null, pas: (state, shape) => shape.path.setAttribute ", state.color); shape.path.setAttribute (" lățimea cursei ", lungimea de stare); shape.setText (Math.round (shape.value () * 100) + '%');); circleBar.animate (0,75, durata: 1500); var semiBar = nou ProgressBar.SemiCircle ("# semi-container", culoare: "violet", strokeWidth: 2, trailWidth: 8, trailColor: "negru" ", width: 1, la: color:" # FF9900 ", lățimea: 2, text: value: '0', className: 'progress-text' 'absolut', top: '45% ', stânga: '50%', umplutură: 0, margine: 0, transformare: null, pas (stare, formă) => shape.path.setAttribute ", state.color); shape.path.setAttribute (" lățimea cursei ", lungimea de stare); shape.setText (Math.round (shape.value () * 100) + '%');); semibaramina (0,75, durata: 2000); Uneori, poate doriți să creați bare de progres cu diferite forme care să corespundă temei generale a site-ului dvs. Web. ProgressBar.js vă permite să creați bare de progres cu forme personalizate folosind Cale() metodă. Această metodă funcționează cum ar fi Formă() dar oferă mai puțini parametri pentru a personaliza animația barei de progres. Cu toate acestea, puteți oferi o durată și easing valoare pentru animație. Dacă doriți să animați culoarea și lățimea cursei folosite pentru desenarea căii personalizate, puteți face acest lucru în interiorul din și la parametrii.
Biblioteca nu oferă nici o cale de a trasa o traseu pentru calea personalizată, așa cum a făcut-o pentru liniile și cercurile simple. Cu toate acestea, puteți crea traseul dvs. destul de ușor. În exemplul următor, am creat o bară triunghiulară de progres folosind Cale() metodă.
Înainte de a scrie codul JavaScript, va trebui să definim calea noastră personalizată SVG în HTML. Iată codul pe care l-am folosit pentru a crea un triunghi simplu:
S-ar putea să fi observat că am creat două elemente de cale diferite. Prima cale are o culoare gri deschisă, care acționează ca traseul pe care l-am văzut cu bare simple de progres în secțiunea anterioară. Cea de-a doua cale este cea pe care o animăm cu codul nostru. Am dat-o id care este folosit pentru ao identifica în codul JavaScript de mai jos.
calea var = noua cale ProgressBar.Path ("# triangle", duration: 6000, de la: color: "# ff0000", width: 2, to: color: "# 0099ff" 4, relaxarea: "easeInOut", pas: (stare, forma) => shape.path.setAttribute ("stroke", state.color); shape.path.setAttribute ("width-stroke", state.width); ); path.animate (1); După cum ați văzut în acest tutorial, ProgressBar.js vă permite să creați cu ușurință diferite tipuri de bare de progres cu ușurință. De asemenea, vă oferă opțiunea de a anima diferite atribute ale barei de progres, precum lățimea și culoarea sa.
Nu numai că, dar puteți folosi și această bibliotecă pentru a modifica valoarea unui element de text însoțitor pentru a arăta progresul în formă textuală. Acest tutorial acoperă tot ceea ce trebuie să știți pentru a crea bare simple de progres. Cu toate acestea, puteți trece prin documentație pentru a afla mai multe despre bibliotecă.
.
