Progress indicators
Here my collection of GIF animated progress indicators.
At the end of the page I have also some Animated PNG, CSS and ASCII-art animations.
Pictures with hard coded margins are altered with my Image tool.
( Apple-like | Segmented | Arrows | Dots | Piped Line | Assorted | Animated PNG | CSS Animations | ASCII Art )
Apple-like
| Example | Source | Description |
|---|---|---|
 | apple.com | Ripped from apple.com |
 |
online-convert | Ripped from online-convert.com |
 | From Twitter | |
 | Ripped from the Spotify play button from Facebook | |
 | WreckTheDirt | From Wreck the Dirt |
 | 5min | From 5min video site. |
 | GitHub | From GitHub |
 | Mac OS X | Default wait indicator on Mac OS X |
 | SedoParking | Via overschotje |
 | Amazon | Ripped from Amazon calculator |
 | vakantievaren | Ripped from HISWA Vakantie Varen |
 | GWT | Ripped from the GWT showcase example |
 | TNT Post | Het vraag stellen scherm van TNT Post |
 | AtWorx | van de site ATWORX |
 |
ING | Ripped from mijn.ing.nl |
 |
Bax Shop | Ripped from spinner.bax-shop.nl |
 | schiphol | From flight finder at Schiphol airport |
 | PhotoPrintIt | From the site Plus Supermarkt PhotoPrintIt site. |
 | stackoverflow | The comment loader from stackoverflow |
 | FSC | Ripped from internal FSC site. |
 | Mad | From the blog of blog.madskristensen |
 | startssl | From the StartSSL Web Application (free SSL) |
 | GIC | From the Groninger Internet Courant. |
 | Arriva | From the Arriva site (but this one didn’t show) |
 | NFL | - |
 | Telegraaf | Spinner van de Telegraaf |
 | Torrent | Somewhere on some torrent site… |
 | Okaphone | From the Okaphone intranet |
 | Tweakers | From tweakers fancy image viewer (scaled to 40px). |
 |
TheVerge | Ripped from theverge.com |
 | PicLoud | From PicLoud via search engine. |
 | Dropbox | From the Dropbox service |
 | BASE | From BASE |
 | inc.com | From inc.com |
 | NRC | From NRC Bezorgklacht module. |
 | FrankBrownDelivers | From the site Frank Brown Delivers (resized). |
 |
Electronica Shop | From the elektronica-shop.nl-website. |
 |
SOL | Ripped from SOL |
 |
Readability | From the Readability chrome extension. |
 | PowerGen | From PowerGen world wide.. |
 | Dejongintra | Van de site http://www.dejongintra.nl/ vakanties |
| BaxShop | Ripped from bax-shop.nl | |
| Amazon | Also ripped from Amazon calculator | |
 |
Vueling | From the Vueling-website. |
 |
MS Azure | From the Microsoft Azure cloudservices website. |
 |
ZaZi | From the ZaZi-website. |
 |
myatos | Ripped from extranet application |
Segmented
| Example | Source | Description |
|---|---|---|
 | IbanBic | Ripped from the IBAN BIC Service |
 | Nikon | Ripped from the Nikon site. |
 | GitHub | Ripped from the GitHub file browser. |
 |
Amazon WS | Ripped from the Amazon Web Services |
 |
webex | Ripped from the WebEx meeting center. |
 | MS | Ripped from an SQL Server Reporting Services installation |
 |
HiFi Corner | Ripped from the Hi Fi Corner |
 |
KLM | Ripped from the KLM |
 | xs4all | Via de xs4all service pagina's (bij uitloggen) |
 | browserscope | From BrowserScope |
 |
NRC | Ripped from the NRC tarieven loader (ad's) |
 | From Google Reader Play | |
 |
BearInHeaven | Ripped from the Bear In Heaven website. |
 | Tortoise | From Tortoise Utopia (not TortoiseSVN). |
 | koga | From the Koga Signature website |
 | OnlineLuisteren | From OnlineLuisteren |
 | justeat | From the Just-Eat website |
 | From Google’s WebApp’s store (install progress) | |
 | From Google’s 2-step verification | |
 | From Google’s instant preview feature | |
 | From Google’s cloud print interface | |
 | GitHub | Ripped from the GitHub file browser. |
 | Yahoo | The first square one from My Yahoo! |
 | Yunoo | From Yunoo, a Dutch personal financial site |
 | Ars Technica | Shown on the Ars Technica formum, while loading comments |
 | EyeDive | From EyeDive, via Mentalized. |
 | EyeDive | From EyeDive, via Mentalized. |
 | EyeDive | From EyeDive, via Mentalized. |
 | Koorong | Via Google Image search on Koorong |
 | GWT | Ripped from the GWT Kitchen sink demo |
Arrows
| Example | Source | Description |
|---|---|---|
 |
From Twitter | |
 | markmail | From the excellent MarkMail |
 | Web | Spinner of world of solitaire |
 | YouTube | From YouTube (dismiss subscription) |
 | GitHub | From GitHub |
 | Yahoo | Image taken from the Yahoo Mail beta (june 2007) |
 | Image taken from the Twitter | |
 | Odify | From Odify |
 | RedTribe | From Red Tribe |
 | KidsData | From Kids Data |
 | Researcha | From Researcha, via google image search |
 |
SAP | From the SAP ESS Performance Manager |
 | Plaxo | From http://www.plaxo.com/ |
 | NoExp | From No Expectations |
 |
Tumblr | From Tumblr, not really progress (reblog), but still nice. |
 | Marktplaats | Displayed when loading one of the images |
 | TomTom | Van de TomTom routeplanner |
 | MS | Van de Microsoft Home User Program. |
 | Marktplaats | Displayed when placing an ad (2010) |
 | pul.ly | From pul.ly |
 |
Microsoft | From the Microsoft Store |
Dots
| Example | Source | Description |
|---|---|---|
 |
App Machine | Ripped from the App Machine. |
 |
MercadoLibre | Via Mercado Libre. |
 | GFX MS | Auth GFX MS. |
| scrum | From Scrum site, scaled with image crop and resize. | |
 | tripadvisor | Via TripAdvisor. |
 | eBay | From eBay |
 | MS | From https://profile.microsoft.com/RegSysProfileCenter/wizard.aspx |
 | BandCamp | From the audio player on BandCamp |
 | Groningen | From the municipality of Groningen. |
 | Afûk | From the webwinkel fan'e Afûk. |
 | Ceramics | From some WordPress plugin on ceramics.org |
 | AdWords | From Google AdWords Netherlands |
 | hypem | From Hype Machine Zeitgeist 2010 |
 | Sync Fusion | From sync-fusion.com. |
 | Arriva | From the Arriva site (shrunk, org. size 55×54) |
 | DAS | Das Keyboard site. |
 | 5min | From 5min video site. |
 | Antwerps | From Antwerps |
 | DotSub | From DotSub |
 | Google Reader | Loading indicator of Google Reader. Also in use with Drupal. |
 | JQuery | From the JQuery UI demo page |
 | Convolution | http://chromium.googlecode.com/svn/trunk/samples/audio/convolution-effects.html |
 | MercadoLibre | Via Mercado Libre. |
 | Knol | Taken from [http://knol.google.com/] |
 | SteamPacket | From Steam Packet |
 | YouTube | From YouTube preferences |
 | Firefox | Wait indicator of the default Firefox skin |
 | Artifactory | From Artifactory |
 | dotnetopenid | From .NET OpenID‘s demo |
 | RTM | From Remember the Milk |
 | Omnium | http://online.cofa.unsw.edu.au |
 | backing | Joy of backing |
 | Computable | Vergroten van een plaatje op http://www.computable.nl/ |
 | NS | NS Hi Speed website. |
 | asp.net | From Microsoft’s Ajax toolkit |
 | AH | Van de AH winkelinformatie pagina |
 |
The Verge | Ripped from The Verge. |
 | Guardian | From the Guardian Detroit in ruins photo shoot loader. |
 | Mentalized | Circling balls, black, by Jakob Skjerning of Mentalized. |
 | Mentalized | Circling ball, by Jakob Skjerning of Mentalized. |
 | amazon | Taken from http://amazon.com/mp3 |
 | opensubtitles | From the search of opensubtitles.org |
 | MS | From the hotmail.com change account page, or Live Search Maps |
 | Anthem | Wait indicator from 2005 examples of Anthem |
Piped Line
| Example | Source | Description |
|---|---|---|
 |
Here | From Here (small) |
 | Blue Wiki | From the blue wiki |
 | parallels | From the control panel of Parallels Plesk. |
 | tumblr | From http://www.tumblr.com/ |
 | unknown | Unknown, but also in use at jQuery UI theme roller site, when changing fonts |
 | SAP | From a in-company SAP HR Self Service installation |
 | unknown | Found in Internet Explorer's cache (same as previous, but different hash?). |
 | EducationQuest | From Know How 2 Go from EducationQuest. |
 | Amazon | From Amazon |
 | Amazon | Amazon Snake, small version |
 | lightbox | Taken from Room Eleven (Lightbox) |
 | Chrome | From the Google Chrome download page (see also throbber design) |
 | Contera | From Kontera , in-text advertising. |
 | Schradinova | From Schradinova. |
 |
From Twitter | |
 |
From Twitter | |
 | Ikea | From Ikea website. |
 | App Machine | Loader from appmachine.com |
 | FileServe | From FileServe, while downloading some Pink Floyd. |
 | VistaPrint | From VistPrint, resized. |
 | ClientApps | From KickApps (this url via Google Image search). |
| De Correspondent | Ripped from De Correspondent. | |
 |
GLS Info | From gls-info.nl |
 |
IlseDonker | From ilsedonker.nl. |
 | JQuery UI | From the JQuery UI Theme Roller site |
 | Dyson | From the Dyson website |
 | MacUpdate | From the MacUpdate promo site. |
 | Here | From Here (mid sized) |
| Vibrant | Inline Vibrant add (trimmed with img-tool) | |
 | Philips | From the Philips webstore. |
 |
AirBNB | From Here Air BNB |
| Codeplex | From the Codeplex code browser, scaled with image crop and resize. | |
| Codeplex | From CodePlex. | |
 | Ziggo | From the Ziggo site |
 |
HackLang | From hacklang.org |
Assorted
| Example | Source | Description |
|---|---|---|
 |
BearInHeaven | From the Bear in Heaven website. |
 | distrify | From a distrify movie player on the fotostrips.nl website. |
 |
The Verge | From the The Verge. |
 | From the Google Offers website. | |
 | Yelp | From Yelp. |
 |
Groupon | From the Groupon. |
 | CoolBlue | From the CoolBlue TV Store website (resized 50%). |
 | susanbijl | From the parachute handbag website. |
 | video2mp3 | From the video2mp3.net website. |
 | SAP | Taken from an internal SAP portal |
 | DMT | Spinning Spinner, from Digital Media Tree. |
 | HEMA | From the HEMA Fotoservice site. |
 | AirBNB | From the AirBNB site. |
 |
Socrata | From the socrata.com. |
 |
Imgur | From the Imgur.com. |
 |
Imgur | From the Imgur.com. |
 | Flickr | From Flickr |
 | Flickr | From Flickr, but smaller (same page) |
 |
DuckDuckGo | From the Duck Duck Go search engine. |
 |
SoundCloud | From the SoundCloud. |
 |
Renee Kelder | From the Renee Kelder, the "Part-Time junky". |
 |
Wolfram Alpha | From the Wolfram Alpha site. |
 | From Facebook. | |
 | From Facebook. | |
 | StraatkunstPrijs | From Groningse Straatkunst Prijs. |
 |
De Correspondent | From De Correspondent Kiosk. |
 | SAP | Taken from an internal SAP hour approval system |
 | Msdn2 | From the tree-control of MSDN Libraqry (resized to 32px) |
 |
Sound Slice | From the Sound Slice. |
 |
Tumblr | From Tumblr, image loading place holder |
 | vvv | From the Dutch Tourism Information, vvv |
 | jquery-lightbox | From the jQuery-lightbox implementation used by inc.com |
 | ext-js | From the Sample site of Ext JS |
 | NetValuator | From netvaluator.com. |
| Learn Async | From Learn Async. | |
 | transavia | From the Transavia website |
 | PayPal | From PayPal |
| PayPal | From paypal (via Steam) website, scaled with image crop and resize. | |
 |
Kahn Academy | From the Kahn Academy site (@50%). |
 |
Kahn Academy | From the Kahn Academy site. |
 | iFixIt | From the notes loader of iFixIt |
 | HP | From the HP site. |
 | Couch Surfing | From the couch surfing site. |
 |
B&B | From the Bed and Breakfast.nl. |
 | Source Gear | From sourcegear.com. |
| Steam | From the Global Collect site (via Steam) website, scaled with image crop and resize. | |
 | BeachBall | The much hated Beach Ball from Apple, found here. |
 | wieowie | From wieowie.nl |
 |
bK | From Blue Kiwi (@50%). |
 |
bK | From Blue Kiwi. |
 | torrent | I forgot where from. A torrent site? |
 | yfrog | From yfrog |
 | yfrog | Idem. but small |
 | quora | From Quora. |
 | sympac | From Sympac site. |
 | Hour glass | Hour glass from an enterprise USD 12 ticketing system. |
 | AbsRadio | By AbsoluteRadio via Mentalized. |
| Drupal | From the search bar of this drupal job site. | |
 | Mentalized | Circling squares with trailer, by Jakob Skjerning of Mentalized. |
 | Mentalized | Radar, by Jakob Skjerning of Mentalized. |
 |
Wie Zoek Je | From Wie Zoek Je. |
 | Mentalized | Scanner, by Jakob Skjerning of Mentalized. |
 | Mentalized | Kitt Scanner, by Jakob Skjerning of Mentalized. |
 | Mentalized | Expanding circle, by Jakob Skjerning of Mentalized. |
 | Mentalized | Hypnotize out, by Jakob Skjerning of Mentalized. |
 | Mentalized | Bouncing ball, by Jakob Skjerning of Mentalized. |
 | bimhuis | From the search bar of the BIMHUIS site. |
 | jQuery | From the jQuery Theme Roller (see the Spinner icons chapter). |
 | iTunes | From the iTunes “Connecting to the iTunes Store.” loader. |
 | SuperUser | From SuperUser, hovering over a tag. |
Another page with lots of indicators: http://mentalized.net/activity-indicators/. Or just search by Google… Also: look on WikiMedia. Or generate your own with AjaxLoad.info. Or play with RafaelJs demo.
Other techniques
Animated PNG's
The following are "native" animated PNG's.
| Example | Source | Description |
|---|---|---|
 |
Trello | Ripped from trello.com. |
CSS animations
The following are pure CSS animations. Hover to pause the animation. Kilianvalkhof has some non-image spinners as well.
| Example | Source | Description |
|---|---|---|
| ShareAholic | WebKit animation; from ShareAholic (works in Safari, Chrome). | |
| ShareAholic | Idem., but active | |
| ShareAholic | Idem., but custom | |
| Firefox | From the skin of Firefox, with own CSS animation | |
| Firefox | From the skin of Firefox, with own CSS animation | |
|
|
37signals | A scaling, CSS3-only (no images) spinner, from 37signals. Pretty cool. |
|
|
Keyamoon | One can also animate font icons with CSS. |
|
|
Keyamoon |
ASCII Art
The following are ASCII art animations, animated with javascript.
| Example | Source | Description |
|---|---|---|
– | Doekman | Re-implementation what I once made in MS-DOS text-mode |
- | Doekman | Re-implementation what I once made in MS-DOS text-mode |
∙∙∙ | Doekman | ASCII-art implemenation of the new Backpack calendar progress indicator |
bq | Doekman | Ligature animation. See also http://zanstra.com/my/ |