I tried "everything" but animation.gif spinner did not work in jQueryUI modal dialog box. Some browsers were fine but it was Firefox refusing to work. Go figure whats the reason. Then found this super excellent non-img spinner component. Give all credits to fgnass.
(NOTE: At the end of this post I have edited a new answer fixing animation.gif problem)
http://fgnass.github.com/spin.js/
http://twitter.com/fgnass
// Show loading(processing) modal dialog
function showLoading(sTitle, str) {
if (sTitle==undefined) sTitle = "Processing";
if (str==undefined) str = "Processing...";
var strBody = "<div id='spinnerdiv'><div style='padding-left:35px'>" + str + "</div></div>";
$("#uidialog").html(strBody);
$("#uidialog").dialog({
title: sTitle,
modal: true, resizable: true, width: "auto", height: "auto",
close: function(event, ui) { },
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
// must use css spinner, animated gif did not work in every browser
var opts = {
lines: 11, length: 7, width: 3, radius: 4, corners: 1, rotate: 0,
color: '#000', speed: 0.7, trail: 38, shadow: false, hwaccel: true,
className: 'spinner', zIndex: 2e9, top: '0', left: '0'
};
var target = document.getElementById("spinnerdiv");
var spinner = new Spinner(opts).spin(target);
}
I have run Firefox, IE8, Chrome, Opera, Android tablet (stock and firefoxbeta), Nokia Lumia800, Nokia C7 browsers. All works fine.
Edit 1 (use gif animation) This is how I was able to fix spinner.gif not animated on some browsers. Trick is to keep spinner div visible state at html page load. Hide it first thing in the jQuery init function. Then you may show+hide spinner div anytime you like and its animated.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spinner Test</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
var spinner = $("#spinner");
spinner.hide();
$("#btnShow").click(function() { onShowClicked(); return false; });
$("#btnHide").click(function() { onHideClicked(); return false; });
});
function onShowClicked() {
var spinner = $("#spinner");
spinner.show();
}
function onHideClicked() {
var spinner = $("#spinner");
spinner.hide();
}
</script>
</head>
<body>
<a href="" id="btnShow">SHOW</a> <a href="" id="btnHide">HIDE</a>
<br/><br/>
<div id="spinner"><img src="loader.gif" /></div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
