You’re offline. This is a read only version of the page.
439
Ok, 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:
Share
Report/ 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;
}
All responses (
Answers (
