Share
Report
443Ok, so I added a loading overlay with spinner to the buttons on my home page. Great! that works. Then I thought hey wouldnt it be nice to show the same overlay with spinner when a user clicks on my custom navbar links?
I certainly had fun figuring this one out.
1. Changes to the Header web template
include creating an appropriate name for use as an id attribute and adding an id attribute to the menuitem
These menuitems are created inside a for loop. id name is the link text with no spaces with "link" appended to it.
2. Changes to the Home web template
Use the newly created id name to bind the loader to a click on the link
in doc ready:
/
/ show loader spinner when navbar links are clicked
$("#CreateNewTicketLink").bind("click", function () {
$('#loader').show();
});
$("#TicketSearchLink").bind("click", function () {
$('#loader').show();
});
3. Changes to custom.css
#loader {
position:fixed;
width:100%;
left:0;right:0;top:0;bottom:0;
background-color: rgba(255,255,255,0.8);
z-index:9999;
display:none;
}
@-webkit-keyframes spin {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#loader::after {
content:'';
display:block;
position:absolute;
left:48%;top:40%;
width:100px;height:100px;
border-style:solid;
border-color:#3498db;
border-top-color:transparent;
border-width: 7px;
border-radius:50%;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}4. complete web template files for reference
If you try this, let me know if it doesnt work for you. I think I got all of the changes in here but you never know.
also, if there is a better way to do this, I would be interested in that too.
All responses (
