Sestavte vlastní pruhy s odpovědným průběhem s ProgressBar.js

Průběžné pruhy většina uživatelů na webu je široce známa. Pro vývojáře je to často komplikovaný proces vytvořit ukazatel průběhu od nuly. Ale s ProgressBar.js nemusíte!

Tato bezplatná open source knihovna nemá žádné závislosti a podporuje všechny hlavní prohlížeče, včetně IE9+.

Ve výchozím nastavení můžete použijte jednoduchý bar, nebo můžete vyberte z několika základních tvarů, jako:

• Jeden řádek
• Půlkruh
• Úplný kruh
• Náměstí
• Trojúhelník

Můžete také navrhnout vlastní tvary jako například srdce, mrak nebo dokonce nápis loga vašeho webu. Je pravda, že to bude trvat nějaké úsilí, ale konečný výsledek může být neuvěřitelný.

Knihovna pracuje na cestách SVG, takže pokud můžete postavit obrys pomocí značek SVG můžete animovat s touto knihovnou postupu.

Animace mohou také obsahovat text nebo mají vlastní vzory start / stop. Úplné rozhraní API má více podrobností s volbami / zpětnými voláními můžete si prohlédnout ve svém volném čase.

ProgressBar.js má také malou instalačního průvodce kde můžeš stáhněte a nastavte skript pomocí Bower, npm nebo jednodušší stránky GitHub.

A pokud si postavíte cokoliv cool, můžete odešlete svůj kód do repo GitHub. Autorem projektu je Kimmo Brunfeldt otevřete problém GitHub kde můžeš odeslat vlastní návrhy zahrnout do knihovny.

Můžeš přidat animované pruhy postupu na stránky registrace, pole pro nahrání nebo na libovolnou webovou stránku jako preloader. Možnosti jsou omezeny pouze jak podrobné jste ochotni se dostat.

Například se mi líbí demo na měření síly hesla od té doby slouží skutečnému účelu a přínosem pro uživatele. Tento příklad přichází s pluginem, tak můžete kopírovat a upravovat podle vašich představ.

Vidět další příklady, podívejte se na domovskou stránku ProgressBar.js nebo nahlédněte do této hry, kde si můžete prohlédnout animaci srdce.