एचटीएमएल 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

आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी, मैं आपको JQuery's ProgressBar पर एक नज़र डालने की सलाह देता हूं।

Answer 3

वेब सामग्री पर प्रगति बार सही क्योंकि तुम नहीं प्राप्त करने के लिए कड़ी मेहनत कर रहे हैं प्रक्रिया को पूरा करने के कुल समय को जानें और आपके पास बार बार अपडेट करने के बारे में आपको बताने के लिए प्रक्रिया से प्रगति संकेतक नहीं हैं। ajaxload.com पर उपलब्ध कताई लोडिंग छवि का उपयोग करके आप बेहतर हो सकते हैं।

आप पूरे पृष्ठ को एक छुपा div कवर कर सकते हैं और जब आप प्रतीक्षा कर रहे हैं तो div को अपने जावास्क्रिप्ट में सक्रिय कर सकते हैं।

अपने html में:

#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; 
} 

और फिर अपने जावास्क्रिप्ट में:

<div style="display:none;" id="wait"></div> 

सीएसएस में

... 
$("#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