progress bar while page is loading

Hi Guys,

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.

I’m hoping that somebody may notice my concern. :slight_smile:

Give it more than six hours for someone to find it and respond. If you need professional help you can always hire a consultant. https://www.xojo.com/resources/consultants.php

Thanks, Tim.

Still waiting…

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.

HI Mark,

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?

[quote=349991:@ronaldo florendo]HI Mark,
Basically, I just want to show a circular progress bar while my page is loading. [/quote]

So you might have a look at the WebProgressWheel

Thanks, John,

I know how to use progress wheel. My trouble is I am not familiar on how to implement the progress wheel while my web page is loading its controls and information.

Have you tried:

[code]ProgressWheel1.Visible = True

//do stuff

ProgressWheel1.Visible = false[/code]

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:

  1. Place a ProgressWheel somewhere on the page (I usually put it over a button to start the page refresh).
  2. Set the static design property in the inspector of the ProgressWheel to Enabled=False, Visible=False
  3. Put your logic to refresh the page in a Timer Action event
  4. Set the timer to OFF in the inspector and set the period to 250
  5. If you are using a button to launch the refresh use this logic in the button action
    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
  6. At the beginning of the timer that is doing the refresh set the timer mode to OFF and Enabled=false
  7. The reset of the logic will continue to run until your loop is finished or you exit due to an error
  8. At the end of the timer logic (when the refresh is done) set the ProgressWheel to Enabled=False, Visible=False

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.

[quote=349757:@ronaldo florendo.[/quote]

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.

What Mark suggested works well. The harder part is adding javascript addEventListeners everywhere. More info: https://forum.xojo.com/39456-47404-web-app-add-running-javascript-before-event-handler-or-me