Twórz niestandardowe paski postępu reagowania za pomocą ProgressBar.js
Paski postępu są powszechnie znane przez większość użytkowników internetu. Dla programistów często jest to skomplikowany proces utwórz pasek postępu od podstaw. Ale z ProgressBar.js nie musisz!
Ta darmowa biblioteka open source nie ma zależności i obsługuje wszystkie główne przeglądarki, w tym IE9+.
Domyślnie możesz użyj prostego paska, lub możesz wybierz z kilku podstawowych kształtów, Jak na przykład:
- Pojedyncza linia
- Półkole
- Pełne koło
- Plac
- Trójkąt
Możesz również zaprojektować własne własne kształty takie jak serce, chmura, a nawet napis logo Twojej witryny. Przyznane będzie to trochę wysiłku, ale efekt końcowy może być niesamowity.
Biblioteka działa na ścieżkach SVG, więc jeśli możesz zbuduj zarysowany kształt możesz używać znaczników SVG ożywić to z tą biblioteką paska postępu.
Animacje mogą również dołącz tekst lub mieć niestandardowe wzory start / stop. Pełne API ma więcej szczegółów z opcjami / callbackami że możesz czytać w swoim czasie wolnym.
ProgressBar.js ma również mały przewodnik instalacji gdzie możesz pobierz i skonfiguruj skrypt za pomocą Bower, npm lub bardziej uproszczonej strony GitHub.
A jeśli zbudujesz coś fajnego, możesz prześlij swój kod do repozytorium GitHub. Twórca projektu, Kimmo Brunfeldt, ma otwórz problem GitHub gdzie możesz prześlij własne projekty do włączenia do biblioteki.
Możesz dodaj animowane paski postępu do rejestrowania stron, przesyłania pól lub do dowolnej strony internetowej jako preloadera. Opcje są ograniczone tylko przez jak szczegółowe jesteś gotów się dostać.
Na przykład podoba mi się demo miernika siły hasła służy prawdziwemu celowi i korzyści dla użytkownika. Ten przykład pochodzi pakowane z wtyczką, więc możesz to skopiować i zmodyfikować według własnych upodobań.
Zobaczyć więcej przykładów, sprawdź stronę główną ProgressBar.js lub rzuć okiem na to skrzypce demo animacji serca.
