HTML PHPプログレスバー

Question

私は、フォームデータを送信するためにPHPを使用するフォームを持つウェブサイトを持っています。クリックした後にボタンをクリックしてPHP情報を送信しないように、動作中のように見えるプログレスバーをページ上に作成する方法はありますか？

ありがとうございました。

Answer 1

プログレスバー：単純なテキストバージョン：

<?php 
// Output a 'waiting message' 
echo 'Please wait while this task completes'; 

// Now while waiting for a certain task to 
// complete, keep outputting .'s 

while (true) { 
    // Echo an extra dot, and flush the buffers 
    // to ensure it gets displayed. 
    echo ' .'; 
    flush(); 

    // Now sleep for 1 second and check again: 
    sleep(1); 
} 
?> 

プログレスバー：PHPベース（grphical）：あなたがいないので

<?php 
// A function that will create the initial setup 
// for the progress bar: You can modify this to 
// your liking for visual purposes: 
function create_progress() { 
    // First create our basic CSS that will control 
    // the look of this bar: 
    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; 
    font-size: 18px; 
    left: 50%; 
    margin: 1px 0px 0px 150px; 
    background-color: #FFFFFF; 
} 

.bar { 
    position: absolute; 
    top: 132px; 
    left: 50%; 
    margin: 0px 0px 0px -158px; 
    width: 0px; 
    height: 20px; 
    background-color: #0099FF; 
} 

.blank { 
    background-color: white; 
    width: 300px; 
} 
</style> 
"; 

    // Now output the basic, initial, XHTML that 
    // will be overwritten later: 
    echo " 
<div id='text'>Script Progress</div> 
<div id='barbox_a'></div> 
<div class='bar blank'></div> 
<div class='per'>0%</div> 
"; 

    // Ensure that this gets to the screen 
    // immediately: 
    flush(); 
} 

// A function that you can pass a percentage as 
// a whole number and it will generate the 
// appropriate new div's to overlay the 
// current ones: 

function update_progress($percent) { 
    // First let's recreate the percent with 
    // the new one: 
    echo "<div class='per'>{$percent} 
    %</div>\n"; 

    // Now, output a new 'bar', forcing its width 
    // to 3 times the percent, since we have 
    // defined the percent bar to be at 
    // 300 pixels wide. 
    echo "<div class='bar' style='width: ", 
    $percent * 3, "px'></div>\n"; 

    // Now, again, force this to be 
    // immediately displayed: 
    flush(); 
} 

// Ok, now to use this, first create the 
// initial bar info: 
create_progress(); 

// Now, let's simulate doing some various 
// amounts of work, and updating the progress 
// bar as we go. The usleep commands will 
// simulate multiple lines of code 
// being executed. 
usleep(350000); 
update_progress(7); 
usleep(1550000); 
update_progress(28); 
usleep(1000000); 
update_progress(48); 
usleep(1000000); 
update_progress(68); 
usleep(150000); 
update_progress(71); 
usleep(150000); 
update_progress(74); 
usleep(150000); 
update_progress(77); 
usleep(1150000); 
update_progress(100); 

// Now that you are done, you could also 
// choose to output whatever final text that 
// you might wish to, and/or to redirect 
// the user to another page. 
?> 

Answer 2

JavaScriptを使用する必要があります。JQuery's ProgressBarをご覧ください。

Answer 3

は、Webコンテンツのプログレスバーが権利を取得するのは難しいですプロセスの総所要時間を把握し、バーの更新時期を知らせるプロセスの進捗インジケータがない場合。 ajaxload.comのような回転ローディングイメージを使用する方がよい場合があります。

あなたが待っているときに、隠されたdivカバーをページ全体にして、javascriptでdivをアクティブにすることができます。あなたのHTML内

：あなたのJavaScriptで

#wait { 
    position:fixed; 
    top:50%; 
    left:50%; 
    background-color:#dbf4f7; 
    background-image:url('/images/wait.gif'); // path to your wait image 
    background-repeat:no-repeat; 
    z-index:100; // so this shows over the rest of your content 

    /* alpha settings for browsers */ 
    opacity: 0.9; 
    filter: alpha(opacity=90); 
    -moz-opacity: 0.9; 
} 

そして：

... 
$("#wait").show(); // when you want to show the wait image 
... 
$("#wait").hide(); // when your process is done or don't worry about it if the page is refreshing