Snadno vytvořte pruh pokroku při tvorbě materiálu s Mprogress.js

Nepopíráme, že Google je materiálové provedení radikálně změnila web. Nabízí a jazyk Návrháři UI se mohou vztahovat na všechny webové stránky a mobilní aplikace.

Tento trend materiálového designu vedl k mnoha knihovnám, včetně populárního rámce Materialize. A jeden z nejvhodnější nové materiálové projekty Našel jsem je Mprogress.js.

Tato knihovna JavaScriptu generuje a ukazatel stavu materiálu pomocí čistého CSS a JavaScriptu. Žádné závislosti, žádný nesmysl. Pouze jednoduché načítání (a přednastavení) s vzhledem materiálu, který bude odpovídat libovolné webové stránce nebo webové aplikaci.

Nastavení je velmi jednoduché a vyžaduje pouze dva soubory: CSS a JS skript z Mprogress.

Můžeš stáhnout oba z repo GitHub nebo použít správce balíčků například npm nebo Bower. Odtud musíte vytvořit nový objekt Mprogress a řekněte mu, aby spustil zavaděč.

To lze provést doslovně jeden řádek kódu:

 var mprogress = nový Mprogress ('start'); 

Další vlastnosti lze použít pro změnu načasování animace, rychlosti nebo barvy zobrazení lišty průběhu. Tato konfigurace vám dokonce umožňuje vytvářet vlastní šablony založené na výchozím stylu designu materiálu. Úžasný!

Podívejte se na demo stránka vidět tento zavaděč v akci. Není to okouzlující načítání bar, ale to nabízí pěkné řešení, aniž byste museli stavět jeden od nuly.

Můžete spustit metody jako soubor() na nastavte procento nebo inc () na zvětšete zatěžovací tyč. To může být zpracované programově vytvořit HTTP zavaděč, ale to vyžaduje extra práci v JavaScriptu.

Krása Mprogress.js je jeho jednoduchost. To vám neříká, jak strukturovat data nebo co je třeba načíst. Mohlo by to být načítání stránky, nebo to může být zpracování souboru upload. Nebo by to mohlo být sledování toho, jak daleko uživatel procházel z horní části stránky.

S touto knihovnou as tebou můžete tolik udělat nulové závislosti můžete jej použít pro jakýkoliv webový projekt. Chcete-li začít, podívejte se na MProgress repo na GitHub, kde můžete také procházet dokumentace.