Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- background:
- visibility property of style attribute of spinner changes to "visible" when it is required.
- We want to monitor this style change, so that we can keep track of how long the spinner is being shown.
- If the spinner is visible for greater than 5 seconds, we would ideally want the screen reader to read something to convey
- to the user that something is happening in the background. We would also want the screen-reader to announce the completion
- when the spinner is closed.
- Note: This is a very simple implementation where there is no page refresh/ reload.
- All we are doing is loading something extra on the page (within the window) and a spinner is visible while that is happening.
- -->
- <div id="Spinner" style="visibility:hidden; right: 0px;" >
- <img id="processing" alt="Processing... please wait" src="spinner.gif"/>
- </div>
- <div id="Delay_message" style="visibility: hidden; position:absolute;left:-10000px;top:auto; width:1px; height:1px;overflow:hidden;" aria-live="rude" aria-atomic="true">
-
- </div>
- <script type="text/javascript">
- var inside =false;
- callbackOnDelay= function(){
- var str = document.getElementById("Spinner").style.visibility;
- if(str.indexOf("visible")!=-1){
- document.getElementById("Delay_message").style.visibility="visible";
- document.getElementById("Delay_message").innerHTML="<span>Processing, please wait </span>";
- inside= true; //we want some text to be read, which is only when the mutation observed a long time gap.
- }
- }
- callback_end= function(){
- var str = document.getElementById("Spinner").style.visibility;
- if(str.indexOf("visible")==-1){
- document.getElementById("Delay_message").style.visibility="visible";
- document.getElementById("Delay_message").innerHTML="<span>Loading complete</span>";
- //we don't want the text to be there anymore. 0.5 seconds should be decent for Loading complete to be read
- setTimeout(initialize, 500);
- }
- }
- initialize = function(){
- //after 0.5 second time gap, initialize the Delaymessage contents to empty, so that we can start again.
- document.getElementById("Delay_message").innerHTML="";
- inside=false;
- }
- var targetemptyspinobj = document.getElementById("Spinner");
- var observer = new MutationObserver(function(mutations) {
- mutations.forEach(function(mutationRecord) {
- var str = targetemptyspinobj.style.visibility;
- if(str.indexOf("visible")!=-1) // visible i.e. spinning icon may/may not take >5 seconds, but set a callback once loading icon is visible.
- setTimeout(callbackOnDelay, 5000); //current time + 5 seconds, else it will only happen at 5th second
- else if(inside) // hidden.
- callback_end();
- });
- });
- var config = { attributes : true, attributeFilter : ['style']};
- if(targetemptyspinobj)observer.observe(targetemptyspinobj, config);
- // Testing
- window.onload =function(){
- document.getElementById("Spinner").style.visibility="visible";
- };
- callback_Hide_Spinner= function(){
- var str = document.getElementById("Spinner").style.visibility;
- if(str.indexOf("visible")!=-1){
- document.getElementById("Spinner").style.visibility="hidden";
- console.log("Hiding spinner");
- }
- }
- callback_Show_Spinner= function(){
- var str = document.getElementById("Spinner").style.visibility;
- if(str.indexOf("visible")==-1){
- document.getElementById("Spinner").style.visibility="visible";
- console.log("Showing spinner");
- document.getElementById("Delay_message").style.visibility="hidden";
- document.getElementById("Delay_message").innerHTML="";
- }
- }
- //hide spinner at 10 seconds from page load
- setTimeout(callback_Hide_Spinner, 10000);
- //show spinner at 15 seconds from page load.
- setTimeout(callback_Show_Spinner, 15000);
- //hide spinner at 30 seconds from page load
- setTimeout(callback_Hide_Spinner, 30000);
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement