Creați Progress Bar Design Design cu ușurință cu Mprogress.js
Nu există nici o negare a faptului că Google proiectare material a schimbat radical web-ul. Acesta oferă o limbaj comun de design proiectanții UI se pot aplica tuturor site-urilor web și aplicațiilor mobile.
Această tendință de design material a condus la numeroase biblioteci, inclusiv cadrul popular Materialalize. Și unul dintre cele mai proaspete proiecte de materiale noi Am găsit că este Mprogress.js.
Această bibliotecă JavaScript generează o material bar stil de progres folosind CSS pur și JavaScript. Nu există dependențe, fără nonsens. Doar încărcare simplă (și preîncărcare) cu un aspect de design material care se va potrivi cu orice site web sau aplicație web.
Setarea este destul de simplă și necesită doar două fișiere: un script CSS și un JS de la Mprogress.
Poti descărcați ambele de la GitHub repo sau utilizați un manager de pachete cum ar fi npm sau Bower. De acolo, trebuie creați un nou obiect Mprogress și spune-i să pornească încărcătorul.
Acest lucru se poate face literalmente o linie de cod:
var mprogress = nou Mprogress ("start"); Alte proprietăți poate fi aplicată pentru a schimba culoarea, viteza sau culoarea de afișare a animației din bara de progres. Această configurație chiar vă permite creați șabloane personalizate bazat pe stilul implicit de design material. Minunat!
Luați o privire la pagina demo pentru a vedea acest încărcător în acțiune. Nu este o bară de încărcare fascinantă, cu toate acestea nu oferă o soluție frumoasă fără a fi nevoie să construiți unul de la zero.
Puteți rula metode cum ar fi a stabilit() la stabiliți un procent sau Inc () la incrementați bara de încărcare. Acesta poate fi manipulat programabil pentru a crea un încărcător HTTP, dar care necesită muncă suplimentară în JavaScript.
Frumusețea Mprogress.js este simplitatea sa. Nu vă spune cum să structurați datele sau ce trebuie să încărcați. Ar putea fi încărcarea paginii sau ar putea fi manipularea unui fișier încărcat. Sau ar putea fi urmărit cât de departe utilizatorul a derulat din partea de sus a paginii.
Există atât de mult cu această bibliotecă și cu ea zero dependențe îl puteți folosi pentru orice proiect web. Pentru a începe, verificați Reprografia MProgress pe GitHub unde puteți de asemenea să navigați prin documentație.
