I would like to know if there is anybody done a technique on how to show a progress bar while the web page is loading? I'm hoping for somebody to share how you have done it.
Did you find an answer?
Try loading your page using a single shot Timer or a Thread then put the update of the progress bar in a separate Timer to update every few seconds. If you can do some sort of percentage calculation while the page is loading you can put that result in a property then have the timer that updates the progress bar use that value to update the page. If you are doing this from a button you can zero your percentage, trigger the repeating timer to update the progress bar, then trigger the one shot timer to do the load.
In Web Apps I routinely do anything that needs to load more than a single row from a DB to update a page in a single shot Timer. I like timers better than threads because I can access Session variables. Threads can access session variables but it is not as straightforward. Generally I start a ProgressWheel before triggering the single shot timer then have the timer turn off the ProgressWheel when it is done. I have not had good luck getting progress bars to update smoothly and ProgressWheels are a simple browser only control. Changing progress bars involves an update from the server.
Don't forget to disable buttons or other things the impatient user might click BEFORE triggering the timer to do the load and turn them on when the update is done. You need to disable buttons BEFORE triggering the one shot timer to do the load.
I set the duration of the one shot timer to something like 250-500 ms so it won't trigger instantly and give the server a little time to push the initial changes (button disables, making ProgressWheels visible, etc.) to the browser.
I am sure there are other ways but this works for me.
Finally, thank you for your answer.
Basically, I just want to show a circular progress bar while my page is loading.
Just want to clarify from your suggestion, do I need to show a WEBDIALOG to put the circular progress bar? or I just need to drag the progress bar to the center of my web page?
Have you tried:
ProgressWheel1.Visible = True //do stuff ProgressWheel1.Visible = false
Finally, thank you for your answer.
I do get surprised by statements like this.
Yes, questions get asked, and questions get answered here.
But everyone is a user, we don't all know everything about everything, and no-one is 'on call' to provide an answer - people may not know themselves, or don't have an interest.
It's not like having a paid support contract.. answers given are favors.
Here are the steps:
a) Set the ProgressWheel to Enabled=True, Visible=True
(because the timer is not yet started woking the progress wheel will become visible when the button logic ends)
b) Set the timer mode to SINGLE and Enabled=true (probably not necessary but I always do it)
c) No other logic in the button
d) After 250 ms the timer will fire and start working on the refresh
The timer will end and the server will push the page refresh data to the browser in one big "chunk" and turn off the Progress Wheel.
Remember if you need to exit the timer refresh logic due to an error or other reason be sure to turn off the Progress Wheel because it will continue to be visible and spin.
I hope this helps.
One more note.
If you put all of your logic and the Start/Stop of the ProgressWheel in the refresh button action or in a method called by the button you never seem to see the ProgressWheel.
The server doing all of the work to refresh the Webpage essentially "buffers" up all of the command, including the ProgressWheel Enable=True, and Visible=True, then sends the whole "chunk" when the button action event ends. The ProgressWheel actually starts, data refreshes, and the ProgressWheel stops so fast you just cannot see it.
If you do the refresh logic in a timer the server then has a chance to push the ProgressWheel Visible=True BEFORE the refresh logic starts to run and it gets to the browser so you can see it.
I haven't check the latest version of Xojo, but in Xojo 2015R2.2 you find some code examples with use of WebProgressWheel or WebProgressBar (Xojo\Xojo 2015r2.2\Example Projects\Web\Controls) this might give you an idea for your project.