Progress bar

dakata__92

dakata__92

Super Moderator
Работя с html 5 и желая да използвам тага <progres> за да си направя прогресен бар. Имам структора на сайта която налага изпълнението на даден код в един асайд блок в който желая докато се изпълняват от сървара циклите да визуализира, че нещо се изпълнява и след като зареди да се премахне барът.
говоря за нещо такова:

Код: 
<aside onload="stopBar()">
<progress></progress>
<?php
for($i=1; $i<101; $i++){
echo '<br>'.$i;
}
?>
</aside>

Дайте ми нещо просто и ефектно, като по възможност направо с директен пример ето тук: http://jsfiddle.net/ :?:
 
Ето някои примери:
1. http://stratosprovatopoulos.com/web-development/php/ajax-progress-php-script-without-polling/
2. http://www.binarytides.com/ajax-based-streaming-without-polling/ -> това мисля, че е по-добро, защото изкарва процентите, благодарение на "стриймване"

Пробвай ги и виж кое ще ти свърши работа, но във всеки случай, ще трябва да разделиш кода във отделни файлове както е показано във примерите, зада се получи този ефет :) :?:
 
ето със css3 и progress в хтмл5

https://css-tricks.com/html5-progress-element/

а това е с малко js, динамично през интервал

http://www.hongkiat.com/blog/html5-progress-bar/
 
Е даде ама как ще стане смисъл цикъла може да върти и един час ако се налага. Въпроса ми е как самият прогрес бар ще отчете колко е заредено и още колко има да върти цикъла? Дайте пример по питането иначе и аз прегледах из нета всятакви примери. :)
 
Ето ти демо. Работи идеално но може да се подобри още :). В случая слипа бави с една секунда за да се вижда по-добре какво става, но ако не ти харесва просто го махни. Сложил съм set_time_limit(0); защото пхп спира скрипта по дефаулт след 30 сек.
Код: 
<!DOCTYPE>
<html>
<head>
    <title>Progress Bar</title>
</head>
<body>

<div id="progress" style="width:500px;border:1px solid black;"></div>

<div id="information"></div>
<?php
// Total processes
$total = 101;
// Loop through process
for($i=1; $i<=$total; $i++){
    // Calculate the percentation
    $percent = intval($i/$total * 100)."%";
    
    // Javascript for updating the progress bar and information
    echo '<script language="javascript">
    document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';background-color:#6699FF;\"> </div>";
    document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
    </script>';
    
    set_time_limit(0);

// This is for the buffer achieve the minimum size in order to flush data
    echo str_repeat(' ',1024*64);
    

// Send output to browser immediately
    flush();
    

// Sleep one second so we can see the delay
    sleep(1);
}
// Tell user that the process is completed
echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>';
?>
</body>
</html>
 
Ъъъъ да работи но не си ме разбрал. По принцип търся някакъв начин прогрес бара да показва напредъка на зареждане на кода в самият таг. Какво имам предвид:
Код: 
<aside onload="startBar()">
<progress></progress>
// някакъв код
<?php
for($i=1; $i<101; $i++){
echo '<br>'.$i;
}

// още код
?>
</aside onload="stopBar()"> -> ето тук това като зареди да е максималната стойност и да показва  че във въпросният таг се извършва някакъв код който чакаме да се изпълни.
Идеята ми е че вътре се изпълнява в тага някаква система бог знае каква. Просто искам да показва, че зарежда нещо и че се извършва някаква работа нещо.
 
teroristd каза:
Честно казано изобщо не те разбирам какво искаш.
Увеличете...
Еми искам да подкарам нещо такова:
Код: 
<script>
			function progressBar(){
				document.getElementById("progress").style.display='none';
			}
			</script>
		<aside id="aside" onLoad="progressBar()">

			<progress id="progress"></progress>
			<?php include_once('system/AC.php');?>
		</aside>
 
ми направи го с ajax, достатъчно отговори получи, ако искаш цял код си го напиши
 
embaka каза:
ми направи го с ajax, достатъчно отговори получи, ако искаш цял код си го напиши
Увеличете...
Нещо не успявате да ме разберете но ако успея сам да се справя ще ви пратя кода. Търся най-най простото решение на проблема по ред причини. Ajax бави. Накрая ще сложа една снимка и онлоад ще я премахвам с display none.
 
Mи човек ajax ти бави щот не правиш по една операция а правиш по много, направи го да прави по една операция, като изчислява колко са променени, колко остават и спрямо тях изчисляваш до колко процента е стигнало, връщаш json и си обновяваш прелодъра, толкова ли е сложно? AJAX се ползва за малки операции, а не за големи, за това ти бави.
 
embaka каза:
Mи човек ajax ти бави щот не правиш по една операция а правиш по много, направи го да прави по една операция, като изчислява колко са променени, колко остават и спрямо тях изчисляваш до колко процента е стигнало, връщаш json и си обновяваш прелодъра, толкова ли е сложно? AJAX се ползва за малки операции, а не за големи, за това ти бави.
Увеличете...
Горният код който дадох зарежда една цяла система в този таг <aside></aside>
Просто докато потребителя чака да се зареди тага искам в него да се изписва или показва някакъв прогрес бар, че нещо се върши и след зареждането на тага просто да премахне бара или картинката. Незнам как по-просто да го обесня. Проблема не е така прост защото се въртят изключително много странични работи. Проблема е че сега при onload и викането на функцията не желае да премахне от тага бара.
http://jsfiddle.net/kuetfwea/2/
 
Ами тогава го направи така, направи го с ajax това което ще се случва, като се рънне в началото ajax сложи един gif прелодър в един див да се вижда, че се случва нещо и след като ajax върне success просто го направи display:none и върни това което се е случило в ajax с някаъв html или изпиши текст по твое усмотрение :)
 
Ще ти дам една идея, но представа си нямам дали ще работи, ще трябва да тестваш. Слагаш един EventListener да слуша за лоад евента и когато е готово с remove() функцията премахваш прогрес тага.
 
teroristd каза:
Ще ти дам една идея, но представа си нямам дали ще работи, ще трябва да тестваш. Слагаш един EventListener да слуша за лоад евента и когато е готово с remove() функцията премахваш прогрес тага.
Увеличете...
Интересно, дай пример с код. Не съм работил над този тип проверка. :)
 
Справих се с проблема но се появи друг...
[js]
window.onload = function() {
document.getElementById("progress").style.display = 'none';
}
[/js]

Това реши проблемите ми но уви сега се появи проблем със стилиазирането на тага. Може ли някой да ми помогне да стилиазирам <progress> тага. Искам просто сега както е на 100% оцветен да му сменя цвета и да продължи така да си мърда лек транспарент по дължината но уви не се получава...
 
Може ли някой тук да добави анимирано циклично зареждане на вътрешният прогрес барр с чист JS ? Да е някакво циклично зареждане. :)

http://jsfiddle.net/GqrnC/740/

Да е нещо подобно но с чист JS.

http://jsfiddle.net/soyuka/66RmV/
Искам нещо подобно да се получи!
loading.gif
 
dakata__92 каза:
Може ли някой тук да добави анимирано циклично зареждане на вътрешният прогрес барр с чист JS ? Да е някакво циклично зареждане. :)

http://jsfiddle.net/GqrnC/740/

Да е нещо подобно но с чист JS.

http://jsfiddle.net/soyuka/66RmV/
Искам нещо подобно да се получи!
loading.gif
Увеличете...
Виж това - https://github.com/code-hunger/js-progress-bar
Има и демо.
 
anonimen каза:
dakata__92 каза:
Може ли някой тук да добави анимирано циклично зареждане на вътрешният прогрес барр с чист JS ? Да е някакво циклично зареждане. :)

http://jsfiddle.net/GqrnC/740/

Да е нещо подобно но с чист JS.

http://jsfiddle.net/soyuka/66RmV/
Искам нещо подобно да се получи!
loading.gif
Увеличете...
Виж това - https://github.com/code-hunger/js-progress-bar
Има и демо.
Увеличете...
Справих се с малко gif-че и транспарент беграунд. Кога да се появява как и прочие. :D
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе