The splash page (logo) stays for a while with no indication for progress!
The splash page (logo) stays for a while with no indication for progress!
Is there a way to show the “progress sign” at this level?
Best,
Majdoleen
0
-
No, and it is not advised to use an animated image. But you can add a text "Wait until the viewer loads".
From the documentation:Animated images do not perform well in the splash screen, because the splash screen displays while the viewer is busy loading.0 -
We like to place a loading-style gif on our loading screens, for example one that you could create yourself (http://www.ajaxload.info/) , like this: https://maperture.digitaldataservices.com/gvh/Resources/Images/Custom/ajax-loader.gif .
These images are great because they give the appearance of something happening wihtout actually having to do anything. It's like muzak in the elevator: it's just there to keep the passengers calm. Definitely improves the experience.0 -
I also added a loading bar to our site. Unfortunately it's a little jerky but it's gives a bit of an indication that the site is loading. Here's what to add to the index.html (C:\inetpub\wwwroot\Html5Viewer\Index.html)
In the <head> section under the splash.css refernce add a style tag as follows<link rel="stylesheet" href="Resources/Styles/splash.css" /> <style> #myProgress { width: 100%; background-color: #ddd; } #myBar { width: 1%; height: 10px; background-color: #4CAF50; } </style>
In the <body> section in the splash screen div add the myProgress div<!-- Splash Screen Markup --> <div class="splash-overlay"> <img class="splash-pre-loader" src="Resources/Images/loader-small.gif" alt="" /> <div class="splash-plate splash-invisible"> <img class="splash-image" alt="" /> <p class="splash-paragraph">This application uses licensed Geocortex Essentials technology for the Esri<sup>®</sup> ArcGIS platform. All rights reserved.</p> <div id="myProgress"> <div id="myBar"></div> </div> </div> </div>
And finally in the script section of the page add the following function and call it.<script> ... function move() { var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } } .... .... new move(); </script>
You may need to adjust the id = setInterval(frame, 10); to a higher value if the bar moves to quickly.
Hope this helps.
Cheers,
Bryan0 -
Thank you for sharing the code Brian:
It looks a clean and effective solution.0
Please sign in to leave a comment.
Comments
4 comments