Vytvárajte vlastné responzívne pokrokové bary s programom ProgressBar.js

Pokrokové pruhy sú všeobecne známe väčšinou používateľov na webe. Pre vývojárov je to často zložitý proces vytvoriť pruh priebehu od začiatku. Ale s ProgressBar.js nemusíte!

Táto bezplatná open source knižnica nemá žiadne závislosti a podporuje všetky hlavné prehliadače, vrátane IE9+.

V predvolenom nastavení môžete použite jednoduchý pruh, alebo môžete vyberte si z niekoľkých základných tvarov, ako napríklad:

• Jedna čiara
• polkruh
• Plný kruh
• Námestie
• Trojuholník

Môžete tiež navrhnúť vaše vlastné tvary ako je srdce, oblak alebo dokonca aj písmo loga vašej webovej stránky. Pripusť to bude vyžadovať určité úsilie, ale konečný výsledok môže byť neuveriteľný.

Knižnica pracuje na cestách SVG, takže ak môžete vytvoriť načrtnutý tvar pomocou značky SVG môžete animovať ju s touto knižnicou progress bar.

Animácie môžu byť tiež zahrnúť text alebo mať vlastné štart / stop vzory. Celý API má ďalšie podrobnosti s možnosťami / spätným volaním ktoré môžete prehliadnuť vo vašom voľnom čase.

ProgressBar.js má tiež malý návod na inštaláciu kde môžeš stiahnuť a nastaviť skript pomocou Bower, npm alebo zjednodušenejšej stránky GitHub.

A ak budete robiť niečo cool, môžete zadajte svoj kód do repo GitHub. Tvorca projektu, Kimmo Brunfeldt má otvorte problém GitHub kde môžeš predložiť vlastné návrhy do knižnice.

Môžeš pridať animované pruhy pokroku na registráciu stránok, na odovzdávanie polí alebo na ľubovoľnú webovú stránku ako preloader. Možnosti sú obmedzené iba ako podrobne ste ochotní sa dostať.

Napríklad, mám rád demo pevného disku heslo, pretože to slúži skutočnému účelu a výhody skúsenosti používateľov. Tento príklad prichádza zabalené s pluginom, takže ho môžete skopírovať a upraviť podľa svojich predstáv.

Ak chcete vidieť viac príkladov, pozrite sa na domovskú stránku ProgressBar.js alebo sa pozrite na túto hviezdu, ktorá znázorňuje srdcovú animáciu.