Progress Bar Needed

[freshstart]

I have deployed 2 datapages to my webpage, 1 submission and 1 report. The submission datapage has a large number of dropdowns so it takes some time to load.

Anybody know how I can put a progress bar or spinner up to indicate that date is being retrieved? It doesn't even have to be a progress bar - just a spinner indicating that something is happening so visitors won't leave the page to soon. I would need it to disappear once the datapage has loaded.

I saw this article from a while back but it never indicates how to close the bar or spinner once loading is complete. Js: Auto-Submit A Datapage - Caspio JavaScript Solutions - Caspio Community Forums

 

Thanks for any help!

[Mathilda]

On 3/1/2017 at 3:23 PM, freshstart said:

I have deployed 2 datapages to my webpage, 1 submission and 1 report. The submission datapage has a large number of dropdowns so it takes some time to load.

Anybody know how I can put a progress bar or spinner up to indicate that date is being retrieved? It doesn't even have to be a progress bar - just a spinner indicating that something is happening so visitors won't leave the page to soon. I would need it to disappear once the datapage has loaded.

I saw this article from a while back but it never indicates how to close the bar or spinner once loading is complete. Js: Auto-Submit A Datapage - Caspio JavaScript Solutions - Caspio Community Forums

 

Thanks for any help!

I believe this post should be helpful. You may try using one of plugins recommended there.

[DaeBo]

It seems that pace.js is being recommended a lot, but how does one actually use it?

http://github.hubspot.com/pace/docs/welcome/

[Mathilda]

9 hours ago, DaeBo said:

It seems that pace.js is being recommended a lot, but how does one actually use it?

http://github.hubspot.com/pace/docs/welcome/

I use the following code in the header

<style>
#loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>


<div id="loader"></div>

And the following code in the footer:

<script>
window.onload=function(){

var x = document.getElementById("loader").style.display = "none";
}
</script>

Works fine on my report with 4000 records. Loading circle disappears once the datapage is fully loaded

Hope that helps

[DaeBo]

Thank you

[Kurumi]

Just an update: Caspio released a new awesome video about Progress Bar. You might check this one out!

 

 

 

[NailDyanC]

Hello, just to add to the previous comments above, you can also add a spinner animation for DataPage loading: https://howto.caspio.com/tech-tips-and-articles/adding-spinner-animation-for-datapage-loading/