How To Implement A Very Simple Ajax Loader Using jQueryUI

Author: 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

<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/

<img
     src="//www.ericmichaelstone.com/wp-content/uploads/2013/02/ajax-loader.gif"
     alt="Please wait..."
     class="Spinner hidden"
     id="Spinner-first"
/>

<img

src="//www.ericmichaelstone.com/wp-content/uploads/2013/02/ajax-loader.gif"

alt="Please wait..."

class="Spinner hidden"

id="Spinner-first"

CSS

.Spinner
{
    margin: 0;
    padding: 0;
    border: 0;
}
.Spinner.hidden
{
    display: none;
}

.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 Tags: ajax, ajax-loader.gif, CSS, gif, html, img, javascript, JQuery, jQuery UI, jQueryUI, JS, Loader, Spinner | 1 comment

S	M	T	W	T	F	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

How To Implement A Very Simple Ajax Loader Using jQueryUI

Our Link Network

Business

Client Websites

Fine Dining

Friends & Family

Galleries

Health

Resources

Technology

Travel

The Archives

Latest Ramblings…

Various Topics of No Interest