Простой прогресс бар загрузки страницы

8 января 2016 Антон Кулешов 1328 0

Создавая веб-приложение, не важно, какого уровня: будет ли это обычный веб-сайт или сервис, который принимает массу параметров и обрабатывает их на сервере – хорошей практикой является добавление прогресс бара (progress bar), за анимацией которого можно спрятать все времязатратные части нашего приложения.

Реклама

Ранее я уже рассматривал похожий прогресс бар - nprogress, но toProgress обладает рядом свои преимуществ, которые и делают его хорошим инструментом в копилке веб-разработчика.

Приятные моменты этого прогресс бара:

  • Очень маленький размер притом, что у него есть неплохой набор методов;
  • Написан на JavaScript, всю необходимую разметку и стили добавляет сам;
  • Адаптивность – точно также хорошо работает и на мобильных экранах;
  • Нет лишнего функционала, легко дописываемое решение.

Пример работы на desktop:

primer-na-desktop-toprogress

Пример работы на mobile устройстве:

primer-na-mobile-toprogress

Давайте перейдем к подключению скрипта и его настройке:

<script src="toProgress.min.js" type="text/javascript"></script>

Собственно настройка и создание экземпляра объекта toProgress:

var options = {
	id: "top-progress-bar",
	color: "#f44336",
	height: "2px",
	duration: 0.2
};

var progressBar = new ToProgress(options);

В объекте options может быть всего 4 параметра:

  • id – id элемента прогресс бара;
  • color – цвет линии прогресс бара;
  • height – высота линии;
  • duration – продолжительность и плавность анимации.

После того как мы сохранили экземпляр объекта в переменную progressBar, мы можем начать пользоваться API плагина:

  • increase() – подгрузка до определённого прогресса;
  • decrease() – откат до определённого прогресса;
  • setProgress() – установка подрузки конкретного значения;
  • reset() – сброс работы плагина;
  • finish() – метод завершения прогресса;
  • getProgress() – получить состояние прогресса;
  • show() – показывает линю прогресса, если она спрятана;
  • hide() – отвечает за возможность спрятать линию прогресса.

В первых восьми методах можно использовать callback функцию, что позволяет после определенного состояния прогресс бара совершить манипуляции с веб-страницей.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Нужен ли менеджер задач

21 июля 2017 Антон Кулешов
Нужен ли менеджер задач

Сегодня речь пойдет о целесообразности использования менеджера или планировщика задач! Вопрос на сегодняшний день не просто актуален, а является важной частью для комфортной работы в сети или реальной жизни. Честно говоря, я и сам раньше не был сторонником данного рода сервисов, считая, что важную информацию можно просто записать себе в блокнот или добавить в закладки браузера. И скажу, что это уже изначально неслабо ограничивает. Да, повседневные и мелкие пометки/заметки проще писать на листке бумаге, но если нужно как-то систематизировать их, проанализировать выполненные или просто, найти заметку месячной давности, то менеджер задач хороший инструмент для этого.

Слайдер карусель

7 октября 2015 Антон Кулешов

Желание выделиться и огромная конкуренция вынуждает веб-мастеров делать сайты интересными и запоминающимися. Трудно представить, сколько времени, зачастую, тратится на то, чтобы придать странице особый шарм. И сегодня я хочу рассказать про jQuery плагин Cloud 9 Carousel – это скрипт, которой позволяет сделать 3D слайдер карусель.

Счетчик символов в текстовом поле на jQuery

11 августа 2014 Антон Кулешов

Посещая различные интернет ресурсы, вы могли заметить на некоторых из них форму с ограниченной областью ввода и подсчетом введенных символов. Подобное решение применяют, зачастую, на тех ресурсах, где при большой посещаемости необходимо экономить место на хостинге, и чересчур длинные комментарии нежелательны. Реализуется подобный функционал относительно просто, а выглядит интересно. Счетчик символом - это одно из средств, которое помогает пользователю сориентироваться, сколько слов можно ввести в текстовое поле. Самый яркий пример – это Твиттер, где подсчет символов и ограничение длины фразы, скорее, фишка проекта.