How To Implement A Very Simple Ajax Loader Using jQueryUI
erics, September 23rd, 2011 GET Resources http://code.jquery.com/jquery-1.6.4.min.js http://jqueryui.com/resources/download/jquery-ui-1.10.1.custom.zip LOAD Resources
|
1 2 3 |
<LINK rel="stylesheet" HREF="/css/smoothness/jquery-ui-1.8.14.custom.min.css"> <script src="/js/jquery-1.6.4.min.js"></script> <script src="/js/jquery-ui-1.8.16.custom.min.js"></script> |
HTML Substitute your own loader graphic from http://www.ajaxload.info/
|
1 2 3 4 5 6 |
<img src="//www.ericmichaelstone.com/wp-content/uploads/2013/02/ajax-loader.gif" alt="Please wait..." class="Spinner hidden" id="Spinner-first" /> |
CSS
|
1 2 3 4 5 6 7 8 9 10 |
.Spinner { margin: 0; padding: 0; border: 0; } .Spinner.hidden { display: none; } |
JS Show the spinner called “first”: jQuery(‘#Spinner-first’).fadeIn(); Hide the spinner called “first”: jQuery(‘#Spinner-first’).fadeOut(); Hide all spinners that start with an ID of “Spinner”: jQuery(‘[id^=Spinner]’).fadeOut(); That’s All Folks…
Categories: How-To's, Technology ajax, ajax-loader.gif, CSS, gif, html, img, javascript, JQuery, jQuery UI, jQueryUI, JS, Loader, Spinner
| 
1 comment
