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!

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.

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

Link to post
Share on other sites
  • 2 years later...

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...