Just a simple script to add a YouTube like loading bar to the top of the page for AJAX Requests. Many users said they wanted a way to know when the system was “thinking”. There actually is a loading GIF in the top right (I noticed it in Fuji) but it’s a bit hard to see. This adds a very obvious loader to every page, even popups and CMS page.
This should go in a Global UI Script. Tweak as necessary!
if(self == top){
var loadingDiv = document.createElement("div");
var loadingInterval = false;
var loadingIntervalWidth = 0;
var stopLoading = false;
loadingDiv.style.width = "100%";
loadingDiv.style.position = "fixed";
loadingDiv.style.height = "2px"
loadingDiv.style.top = "0";
loadingDiv.style.left = "0";
loadingDiv.style.zIndex = "2000";
loadingDiv.style.background = "#29d";
loadingDiv.style.display = "none";
document.addEventListener("DOMContentLoaded", function(event) {
document.body.appendChild(loadingDiv)
});
function startProgress(){
if(loadingInterval == false){
stopLoading = false;
loadingDiv.style.display = "block";
loadingDiv.style.width = "0%";
loadingIntervalWidth = 0;
loadingInterval = setTimeout(incrementProgress, 50);
}
}
function incrementProgress(){
loadingIntervalWidth++;
loadingDiv.style.width = loadingIntervalWidth.toString() + "%";
if(loadingIntervalWidth < 100 && stopLoading == false){
loadingInterval =setTimeout(incrementProgress, 50);
} else {
loadingDiv.display = "none";
stopProgress()
}
}
function stopProgress(){
stopLoading = true;
loadingDiv.style.width = "100%";
loadingInterval = setTimeout(hideProgress, 100);
}
function hideProgress(){
loadingInterval = false;
loadingIntervalWidth = 0;
loadingDiv.display = "none";
loadingDiv.style.width = "0%";
clearTimeout(loadingInterval);
}
CustomEvent.observe('ajax.loading.start', function() {
startProgress()
});
CustomEvent.observe('ajax.loading.end', function() {
stopProgress();
});
}