Сегодня я постараюсь расказать о том как сделать динамический индикатор выполнения задачи или просто progress bar!
Эта тема не претендует на звание статьи, но то что она девствительно нужна многим PHP программистам - это правда, потому прошу выделить ей отдельный топик.
Статья моя, и все вопросы касающиеся ее прошу задавать сдесь!
Постараюсь пошагово разьяснить все аспекты и помочь Вам в разборе скрипта.
А теперь о progress bar'e:
В некоторых случаях Вам может понадобится визуально представить на экране ситуацию связяную с выполнением скрипта.
В таком случае можно сделать вывод динамического индикатора выполнения задачи, что будет уведомлять пользователя о том, когда загрузится скрипт.
Существуют разные способы добится этого, с использованием лишь PHP, или с помощю JS, CSS, Ajax.
Тут я покажу несколько примеров что обьединяют PHP и CSS.
Начнем!
Progress bar - Легкая версия
Создадим простую, текстовую версию прогресс бара:
Выводим на экран сообщение что предупредит пользователя о загрузке скрипта
<?php
echo "Происходит загрузка скрипта";
ВЫ можете вписать свое сообщение, все на свой вкус..
Теперь реализуем цикл, который будет определять заданую задачу и выводить точку
while (true) {
// Ставим точку и чистим буфер, чтобы убедится, что результат будет выведен на экране
echo '.';
flush();
//Теперь спим 1 секунду и повторяем цикл
sleep(1);
}
?>
Если вы захотите использовать данный прогресс бар, Вам нужно будет заменить цикл while(true) на реальную проверку выполнения конкретной задачи.
Например существования файла или процес загрузки...
Вы можете реализовать нужный цикл с даным условием)
Progress bar - PHP + CSS версия
Создадим более сложную и более красивую версию:
Для начала создадим функцию, что будет создавать исходный вид полосы
<?php
function progressbar() {
// Создадим стиль CSS
echo "
<style>
#text {
position: absolute;
top: 100px;
left: 50%;
margin: 0px 0px 0px -150px;
font-size: 18px;
text-align: center;
width: 300px;
}
#barbox_a {
position: absolute;
top: 130px;
left: 50%;
margin: 0px 0px 0px -160px;
width: 304px;
height: 24px;
background-color: black;
}
.per {
position: absolute;
top: 130px;
left: 50%;
margin: 1px 0px 0px 160px;
font-size: 18px;
background-color: #ffffff;
}
.bar {
position: absolute;
top: 132px;
left: 50%;
width: 0px;
height: 20px;
margin: 0px 0px 0px -158px;
background-color: #0099ff;
}
.blank {
background-color: white;
width: 300px;
}
</style>
";
Теперь выведем начальный XHTML, что будет перезаписан позже
echo "
<div id='text'>Прелоадер</div>
<div id='barbox_a'></div>
<div class='bar blank'></div>
<div class='per'>0%</div>
";
Удостоверимся что результат выводится
Создадим функцию, которой передадим % в виде числа, а она просто будет генерировать правильный div
function update($percent) {
//Сначала обновляем переменную percent новым значением:
echo "<div class='per'>{$percent}%</div>\n";
//Теперь выводим полоску - bar и установим ее ширину в 3 раза больше.
echo "<div class='bar' style='width:",$percent * 3,"px'></div>\n";
//Опять чистим буфер
flush();
}
И закончим скрипт инициализацией функции progressbar() и имитацией деятельности (Обновляя последовательно результат)
progressbar();
//Имитируем деятельность. Команда usleep будет имитировать выполняемые строки кода
usleep(350000);
update(7);
usleep(1550000);
update(28);
usleep(10000000);
update(48);
usleep(3500000);
update(68);
usleep(30000);
update(71);
usleep(5000000);
update(74);
usleep(3500);
update(77);
usleep(350000);
update(100);
//Теперь все готово и вы можете выбрать вариант выводимого текста в финале
echo "мы загрузились...";
?>
Вот и все. Вы можете легко доделать скрипт под себя и свои сайты..
С уважением, MDxaker from Antichat!