Progress Indicators for Ajax, etc


	Progress Indicators for Ajax, etc
BigBadWolf
6-11-2006 10:00 AM
655 views
tags:
ajax, indicators, graphics, animated, web, design
Add a Comment
Login to Comment. Not a member yet? Sign up
View the Top Clips from June 11, 2006
Embed This Clip In Your Site...
<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://www.clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/f5ec771d-70ad-4ca2-a82d-ee89843cd9b7/A719B5B2-139E-4654-A8F8-9794A66F9DFF/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://mentalized.net/activity-indicators/" href="http://mentalized.net/activity-indicators/" style="font-size: 11px;">mentalized.net</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mentalized.net/activity-indicators/"><H1>Progress indicators</H1></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mentalized.net/activity-indicators/"><DIV class="indicators">
			<P>By <A title="Jakob Skjerning" href="http://mentalized.net">Jakob Skjerning</A>:
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/circle-ball-dark-antialiased.gif" />
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/circling-ball-3-frame-fade-black.gif" />
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/circling-ball-3-frame-fade-transparent-back-dark-antialiased.gif" />
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/circling-ball-black-back.gif" />
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/radar-transparent.gif" />
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/scanner.gif" />
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/kittscanner.gif" />
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/circling-squares-with-trail.gif" />
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/bouncing_ball.gif" />
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/snake_transparent.gif" />
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/expanding_circle.gif" />
				<IMG alt="By Jakob Skjerning (http://mentalized.net)" src="http://mentalized.net/activity-indicators/indicators/hypnotize_out.gif" />
			</p> <P>
				By <A title="Virgin Radio" href="http://www.virginradio.co.uk/">Virgin Radio</A>:
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/virgin_radio/refresh.gif" />
			</p> <P>
				By <A title="Keppler-IT" href="http://www.keppler-it.de/">Keppler-IT</A>:
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/keppler-it/pleasewait.gif" />
			</p> <P>
				By <A title="absofort" href="http://absofort.de/">absofort</A>:
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/absofort/progress.gif" />
			</p> <P>
				By <A title="FreeSolutions" href="http://www.freesolutions.com.ar/">FreeSolutions</A>:
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/freesolutions/progressBarShort.gif" />
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/freesolutions/progressBarLong.gif" />
			</p> <P>
				By <A title="Pascal Germroth" href="http://mentalized.net/activity-indicators/mailto:pascal@germroth.name">Pascal Germroth</A>:
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/pascal_germroth/indicator.black.gif" />
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/pascal_germroth/indicator.white.gif" />
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/pascal_germroth/progress.gif" />
			</p> <P>
				By <A title="Eyedive" href="http://eyedive.com">Martin Jespersen</A>:
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/eyedive/icon_animated_busy.gif" />
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/eyedive/icon_animated_busy2.gif" />
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/eyedive/icon_animated_busy2_2.gif" />
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/eyedive/icon_animated_busy2_2_5.gif" />
			</p> <P>
				By <A title="3 Man Army" href="http://3manarmy.com">3 Man Army</A>:
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/3manarmy/3MA_loadingcontent.gif" />
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/3manarmy/3MA_processingbar.gif" />
			</p> <P>
				By <A title="Nicolai Willems" href="http://www.pacific-assault.dk">Nicolai Willems</A>:
				<IMG alt="" src="http://mentalized.net/activity-indicators/indicators/pacific-assault/loader.gif" />
			</p> <DIV class="backgroundColorPicker">
				Background color:
				<A title="Set background color to black" href="#changeColor">Black</A>
				|
				<A title="Set background color to white" href="#changeColor">White</A>
				|
				<A title="Pick your background color" href="#changeColor">Custom</A>	
(for display purposes only, doesn't actually change the images)
			</DIV>
		</DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mentalized.net/activity-indicators/"><P>These images are all released into the <STRONG>public domain</STRONG>. Right click and <STRONG>save</STRONG> if you want to <STRONG>use</STRONG> one for your AJAX application or the like. If you do use them, I'd love to be <A href="http://mentalized.net/activity-indicators/mailto:jakob@mentalized.net">told about it</A>. <A href="http://mentalized.net/journal/2005/11/29/ajax_activity_indicators/">Read the journal entry related to this</A>.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mentalized.net/activity-indicators/"><P>If you have a killer indicator of your own that you wish to share, feel free to <A href="http://mentalized.net/activity-indicators/mailto:jakob@mentalized.net">submit it to me</A>. Please don't submit stuff to me that's not yours to give away.</P></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/A719B5B2-139E-4654-A8F8-9794A66F9DFF/blog/" title="blog or email this clip"><img src="http://content9.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>