Utwórz pasek postępu projektu materiału Łatwo za pomocą Mprogress.js

Nie ma wątpliwości, że Google wygląd materiału radykalnie zmienił sieć. Oferuje a wspólny język projektowania że projektanci interfejsu użytkownika mogą stosować się do wszystkich witryn i aplikacji mobilnych.

Ten trend projektowania materiałów doprowadził do powstania wielu bibliotek, w tym popularnej struktury Materialise. I jeden z najfajniejsze nowe projekty materiałowe Znalazłem to Mprogress.js.

Ta biblioteka JavaScript generuje pasek postępu w stylu materiału przy użyciu czystego CSS i JavaScript. Brak zależności, bez bzdur. Wystarczy proste ładowanie (i wstępne ładowanie) dzięki wyglądowi materiału, który będzie pasował do każdej strony internetowej lub aplikacji internetowej.

Konfiguracja jest bardzo prosta i wymaga tylko dwóch plików: CSS i skrypt JS z Mprogress.

Możesz pobierz oba z repozytorium GitHub lub użyj menedżera pakietów takie jak npm lub Bower. Stamtąd musisz utwórz nowy obiekt Mprogress i powiedz, aby uruchomił program ładujący.

Można to zrobić dosłownie jedna linia kodu:

 var mprogress = new Mprogress ('start'); 

Inne właściwości można zastosować do zmiany czasu, szybkości lub koloru animacji paska postępu. Ta konfiguracja pozwala nawet tworzyć własne szablony w oparciu o domyślny styl projektowania materiału. Niesamowite!

Rzuć okiem na strona demonstracyjna zobaczyć tę ładowarkę w akcji. Nie jest to hipnotyzujący pasek ładowania, ale oferuje ładne rozwiązanie bez konieczności budowania go od podstaw.

Możesz uruchamiać metody takie jak zestaw() do ustaw procent lub inc () do zwiększ pasek ładowania. Można go obsługiwać programowo, aby utworzyć program ładujący HTTP, ale wymaga to dodatkowej pracy w JavaScript.

Piękno Mprogress.js to jego prostota. Nie mówi ci, jak uporządkować dane lub co trzeba ładować. Może to być ładowanie strony lub obsługa przesyłania plików. Może to być także śledzenie, jak daleko użytkownik przewijał się od góry strony.

Z tą biblioteką i tak wiele można zrobić zero zależności możesz go użyć do dowolnego projektu internetowego. Aby rozpocząć, sprawdź MProgress repo na GitHub, gdzie możesz również przeglądać dokumentacja.