Переключать пункты меню

Как сделать прогресс бар php и mysql

Для ясного течения любого серверного процесса, например, для загрузки большого файла требуется наглядный индикатор в виде прогресс бара. Кто не в курсе, прогресс бар - это широкая белая полоса, которая в динамике в зависимости от хода процесса, заполняется полосой более темного цвета. Цвета могут быть разные синий, красный, зеленый и так далее. Все зависит от предпочтений самого программиста, который пишет такое приложение. Для создания самого индикатора в HTML5 существует простой тег <progress>. 

Данный тег поддерживается большинством современных браузеров, например, Google Chrome, Firefox, Opera и другие. При помощи тега можно подробно и красочно показать, как происходит тот или иной процесс на стороне сервера. 

 

 

Прогресс бар загрузки файла 

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

Рассмотрим простой пример скрипта, который показывает, как идет загрузка файла на сервер. Создадим простую форму внутри которого вместо простого индикатора загрузки установим прогресс бар. Сам HTML-код для страницы следующий:
 

Как вы и заметили для самого скрипта используем небольшое расширение jQuery. Для самого индикатора, как уже говорилось выше, используем теги html5 <progress></progress> Для более красочной демонстрации течения самого процесса, окрасим заполняющую полосу оранжевым цветом, сам индикатор заключим в круглую рамку аналогичного цвета. Фон самого индикатора - белый. Для этого пропишем для тега progress - id="progressbar".

А в файле стилей style.css укажем тег # progressbar и зададим стили, о которых говорили чуть выше. Для файла стилей укажем следующее:
 

Теперь осталось указать наверху javascript файлы для обработки самого течения процесса. Сам индикатор прогресс бара, указанный в примере, не содержит файла, который делает саму загрузку файла. Данный пример лишь показывает сам ход процесса. Файл для загрузки используйте свой или указанный в другом примере. 

Добавить комментарий


Коллекция скриптов и модулей   © 2017