Jump to content

Recommended Posts

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!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...