Створіть індивідуальну адаптивну панель прогресу з ProgressBar.js
Індикатори прогресу широко відомі більшості користувачів у мережі. Для розробників часто це складний процес створити індикатор виконання з нуля. Але з ProgressBar.js Вам не потрібно!
Це безкоштовна бібліотека з відкритим кодом не має залежностей і підтримує всі основні браузери, включаючи IE9+.
За замовчуванням можна використовуйте простий бар, або ви можете вибрати з декількох основних форм, як от:
- Один рядок
- Півколо
- Повне коло
- Площа
- Трикутник
Ви також можете проектувати власні форми наприклад, серце, хмара або навіть написи логотипу вашого сайту. Зрозуміло, що це потребує певних зусиль, але кінцевий результат може бути неймовірним.
Бібліотека працює на шляхах SVG, так що якщо можете побудувати окреслену форму можна використовувати розмітку SVG анімувати його з цією бібліотекою прапорця прогрес.
Анімації також можуть включити текст або мають власні шаблони запуску / зупинки. Повний API має детальніше з опціями / викликами що ви можете прочитати на своєму дозвілі.
ProgressBar.js також має невеликий посібник із встановлення де можна завантажити & налаштувати сценарій за допомогою Bower, npm або більш спрощеної сторінки GitHub.
І якщо ви побудуєте щось круте, ви можете надішліть свій код у репо GitHub. Творець проекту Кіммо Брунфельдт має відкрийте випуск GitHub де можна надсилати власні проекти до бібліотеки.
Ти можеш додати анімовані смуги прогресу для реєстрації сторінок, завантаження полів або на будь-яку веб-сторінку в якості попереднього завантажувача. Параметри обмежені лише як детально ви готові отримати.
Наприклад, мені подобається демо-показник міцності пароля служить реальній меті і надає переваги користувальницькому досвіду. Наведений приклад упакований з модулем, щоб скопіювати та змінити його за своїм смаком.
Бачити більше прикладів, перевірте домашню сторінку ProgressBar.js або подивіться на цю скрипку, демонструючи анімацію серця.
