Създайте персонализирани отзивчиви ленти за напредък с ProgressBar.js
Ленти за напредък са широко известни на повечето потребители в мрежата. За разработчиците често е сложен процес създайте лента за напредък от нулата. Но със ProgressBar.js не е нужно!
Тази безплатна библиотека с отворен код няма зависимости и поддържа всички основни браузъри, включително IE9+.
По подразбиране можете използвайте обикновен бар, или можеш изберете от няколко основни форми, като:
- Една линия
- полукръг
- Пълен кръг
- Квадрат
- триъгълник
Можете също така да проектирате Вашите собствени персонализирани форми като сърце, облак или дори надпис на логото на уебсайта ви. Разбира се, това ще отнеме известно усилие, но крайният резултат може да бъде невероятен.
Библиотеката работи на SVG пътища, така че ако можете изграждане на очертана форма можете да използвате SVG анимирайте го с тази библиотека с ленти за напредък.
Анимациите също могат включва текст или има персонализирани шаблони за старт / стоп. Пълният API има повече подробности с опции / повиквания които можете да прегледате в свободното си време.
ProgressBar.js също има малък ръководство за инсталиране където можете изтеглете и настройте скрипта използвайки Bower, npm или по-опростената GitHub страница.
И ако направите нещо готино, можете изпратете кода си в GitHub repo. Създателят на проекта Киммо Брунфелд има отворете GitHub където можете подайте персонализирани дизайни да бъдат включени в библиотеката.
Можеш добавете анимирани ленти за напредък да се регистрирате в страници, да качите полета или в която и да е уеб страница като прелоадер. Опциите са ограничени само от колко подробни сте готови да получите.
Например, аз харесвам демо на парола, тъй като той е демо служи за истинска цел и ползите за потребителите. Този пример идва опаковани с приставката, така че можете да копирате това и да го промените по ваш вкус.
Да видиш повече примери, разгледайте началната страница на ProgressBar.js или вижте в тази цигулка, демонстрирайки анимацията на сърцето.
