Tag Archives: loader

YouTube Like Loader

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(); }); }