In Page Progress Spinners for
In Page Tasks that Take Time
Spinners! Spinners! Everywhere you look, but they all have one thing in common. They are programmed to respond to an AJAX call. What I mean by this is simple to understand. The ability for Javascript to call out to a server and request data, recieve it and change a page through the DOM was a major change to how pages on the web behaved. Almost overnight, we went from webpages being reloaded to respond to changes to web pages behaving more like applications. The jarring effect of submitting a page to see the next thing made way to all manner of improved responses and even advertisements that would change without a reload.
This is all well and good, and as time progressed more and more of the work being done on the back end server was being moved to the front end page. Spinners were all over, and still are. They are used to let you know that the page is still working and giving you something to see while the page is using Javascript to have a dialogue with a server and load an amount of data that just takes to long to appear instantaneous.
One afternoon I was working on a project in which a different issue came up. The page had a table with a lot of entries on it. The desire and design was to have the page load in this information for the table and let the person using the page be able to sort the information. From a coding perspective this wasn't all that hard to do nor was it new. But what was happening was that the amount of data that the browsers and pages were being asked to handle was increasing. As fast as they were, if you had too much data in the table to sort, the page would seem to hang and do nothing before suddenly displaying the results.
It was at this point I discovered that the web was full of examples of spinners, but only for loading. That there were whole websites created just to provide spinners for AJAX type applications. However when it came to creating a spinner animation for an in-page action that was not making a call to an external server, it was like a desert.
Below is an example of an in page spinner employed when a page action takes too long
Just click on column header to see each example and sort a column
HERE
| Col-1 | Col-2 | Col-3 | |
|---|---|---|---|
| GHSLANIX | SMAWNDNW | ZMFOGAIM | |
| SWZHHAAE | FQQIHQZD | OZWICNII | |
| WWXWIWKP | BTDMEADT | KYRDITIX | |
| FFQBVOUP | BGJEQTAE | CIFSBEVD | |
| CXEWVUKF | RAMHKHHV | YUTAIZPH | |
| AUYWZFCB | DZHELZNV | LUWTUCQX | |
| ACPQVEET | VBBCGZBR | PDRBHVUY | |
| BIVJAQHF | ZCAKOOSS | OEMFAMCE | |
| SXNNXGDT | WOBKOQGY | HJHZXXOS | |
| MSVEZUZO | YRTPADGA | TOSOJLXL | |
| ZJWAIOEW | VKWDJPTU | KCNLEXDE | |
| RATTREHZ | SCFYVVFR | MGRQESFY | |
| ODUAANQA | VUQRWVIU | AEKCQISF | |
| ERRYQAGB | ASPSIPIR | MTUDNXVB | |
| RTPCCAPV | TYYTZLAS | WKYHUYTP | |
| YSYZUAFO | SDYNVFNV | UYEDNPLF | |
| VPOFRDQC | UDHZAASE | HHONHVTK | |
| LEERQDGX | APLAXOOY | GIBLSEZD | |
| BUZFHWMB | JVLXOUWT | XGVELKAF | |
| WOFGMQOW | NYWWYMJA | KKGYYKTD | |
| ITOYRKHK | SYOGLHZS | ZHPQYTFX | |
| TJOLWIBA | AQLRJFXX | GABSYSYM | |
| LFNEYGBA | CDRTCCIB | CZZISPMP | |
| CCIEIHQM | ZSICDJIH | ODQJPGRM | |
| EDLBNIFR | MGKLBXPS | DSOZJHMA | |
| CPOMEJZQ | HFWJVXIY | JKUXEPOE | |
| VMOFCYPN | YZECRSOF | JLVGSEJB | |
| RNTDTPQV | GELTAKNF | SZYAYMZP | |
| ZEYQKBTE | OMYPVLUJ | GSPGRKZU | |
| EYBJOZCH | CNXGKZUY | IOZTRRMI | |
| TECKGEIV | VBXFKQGX | HETMGFPN | |
| FWQFWKUW | NWTQZKYM | HISNTIBD | |
| EKHODNSC | UMEODLHD | JGBSLRON | |
| IGPGMBEC | WHUGDFQJ | FASVCNUJ | |
| DRPGDAKO | SJKYOWDZ | FGBLJDQM | |
| CQDVNSXB | NQSPSOQS | WLNDTVBU | |
| OYPBOHYJ | IZBGLFXL | NDEXUUED | |
| CJGNQOUJ | LDBMZLFT | MQEFBKCF | |
| THKPQTSE | PZUZYTDW | CAAWICYD | |
| ZOVFKBEJ | OIXTUPWQ | RKKAVBNH | |
| JWXYDNON | DCRZNTUM | PSQGXMXF | |
| SLYMTGTE | URHAGMMN | UZSXWTUF | |
| LMBQYPEJ | EJIKOOCW | EFGDRPLW | |
| USUNUZBW | YYCPUIMF | DTNHMINR | |
| BIEQROFY | GBWJQDHK | DPQNQAZX | |
| MVTKTWNQ | TMUVZBIT | KAZWOIKU | |
| AIYMCTAB | EWVNMNNB | GMGAJKLZ | |
| LVFVDVRE | ERSZIGON | ZYZVJDKX | |
| APRTNGOJ | WJAVXZWT | VPZXOKML | |
| EVLADQKY | FRWEAGQO | SSQEDLPT | |
| FIOMNPQL | RIAXZWAH | WWJXPNOQ | |
| NXBTCVEN | WPRRRTMH | GQDWGVML | |
| WIMYWAGO | EFZLIILA | SYSUCFSM | |
| JASWOWJB | OEZYXCAK | AIAPFQYP | |
| VKLMGDKH | UAAQXLDN | CUSQMPDC | |
| MZJYYKNU | TKFOGABF | TJWDEZNL | |
| OMMRGXXE | TVMMPPUR | DZSPCOLE | |
| GQXBYXQL | CCMLINOZ | OOGZNGHE | |
| JCRLVRYO | SXLZKCQF | DDPKDOUE | |
| RDBFVNOY | THDDUUYD | TSHGSONA | |
| HYHQKXID | CLPBMXMD | NTQVJLUE | |
| GGVRHEFZ | AKIKNFWA | XFLKERGR | |
| SDVKAALG | TZNASVTF | XOFGBLDX | |
| GYCLVTDS | OJLYKZHS | YDRBTXCQ | |
| ASSEMNGA | KJMFGQPJ | WAHNRYXY | |
| RVCPIUSL | NRGFJFMO | KZGJVOXP | |
| YGPLJLQK | TDLZJVVR | SIIBRLYN | |
| PYQKUDTL | MBTODPTH | OVOSHIOZ | |
| YJHADQZT | RENQNDEL | YQYVCFPH | |
| MSGMCBRU | EIFLGJFK | ZNSBEFUJ | |
| XAIECFEN | VYZFOWFL | OZJYFJMS | |
| SONYOMEF | EXOSOZSW | TAFMTLUB | |
| LPFHHSOO | XLLWEVRI | HZDXFICJ | |
| TIUHTMQC | JBTLJFGW | FTFETRFU | |
| JFHIMNNE | HWNYSDLO | LPYPRCYA | |
| EBGKQZOJ | BNHNTMPL | IFECAOXH | |
| GGHUYABF | RNACUOTE | ZRPYCOOO | |
| VRPLTVCO | KIAPODAR | QMUUYMUB | |
| XKLOFDUT | TVEBOYLW | XDFDHPJP | |
| BXWKVXPZ | WZUGPVPU | TFINMKPC | |
| OFIIBHDN | ZMTUXZDS | ZPMSASEZ | |
| CISDHQCR | LGTGUQME | IFPMEEAV | |
| XNJRAYWO | PSBCBAKI | ZBZBAXPC | |
| HKFPISZW | BCCCDLSA | BRXLQWHU | |
| YYVSEOUY | IQXMBKAU | SGWXTECZ | |
| WRZVXXNX | ZZSNOAWV | PCVWQPLS | |
| TZQVUEYF | QOFQXVJA | FFOIJMUZ | |
| EJOZZIJU | EMHJFLTV | PSZOIHYK | |
| AESNVHOP | VXVKOYML | LDLICLGY | |
| QJLEHUKI | JSFSADIZ | BMPIUXVW | |
| IZCJPICE | CNEUFIPU | CYEFLYTZ | |
| FIIITPER | WHXURFYX | LWCUGWSE | |
| OQNLHQRN | ZUMXYQGU | TQLTLUOL | |
| MXSXPCPR | PPBPNOAR | BFJSMOSW | |
| SVSNIZLP | QLKYHWUA | QOPSMQVP | |
| EVESLFUK | KOFEFDOG | LKETIHJV | |
| ZGNVWFSA | HLDVJCST | JVWKUKJQ | |
| PRNGRKOR | RMKNPZNY | ZQIRILAW | |
| FYKPGBZL | VLPAWGWS | FXBQDCBI | |
| GZCQWRIR | LTAFFNUH | JNRUWRLP | |
| UPRFCTLM | KUNCLGDI | UYCNAIER | |
| KERNUYPN | QELVAQGH | ISFDBQHB | |
| PQMFYLKT | AAHNKGQN | SEEXMDJU | |
| VEHCANCD | YOQSCWBU | IIYUMSXA | |
| OJEPGHSI | LIYUFJGW | CUKIEIMP | |
| OIGUNGER | MRSTAJKJ | MBMVIBSH | |
| MOUFSOMH | ZDVHUHBP | XEJABMED | |
| ZIPAOBVT | NSBTNHHH | KOYPQBBI | |
| ALPMIPZC | LWCFKLWX | XNABIECP | |
| OIYZURLW | UWBHWOXY | GVJKVPSV | |
| GBUDTGDK | DRMFHFPC | XRMTDTES | |
| XDTZQWSP | VLMOKIUP | RXFQHBSC | |
| JVKJBQUC | DNNHZOZV | KOJGLZKC | |
| EMUHMMJI | YKROVQUD | FKQKKFTU | |
| WYGSBJRX | EDXGMQWK | HXREMLNF | |
| XOLDVCCN | HYAFPVZR | HLVNPPJR | |
| WHHQEMMY | EEULXXZG | EBNPQFHM | |
| OKYOUROK | MWODELUV | RKDWRUEF | |
| CSQYJUDU | MPTXXFJG | YQIYXHYR | |
| ZTFINQCM | FAQVJHTU | XFZGHHCN | |
| USGLBMKR | HYWGCNCE | QDWOOIVW | |
| LOAHHXVH | REYXLKBJ | QCZVTORA | |
| GKKXEOYJ | FXPNNJUH | OEPSNXKC | |
| TCUNIQPX | VGJULFVQ | IHPOXYHJ | |
| MCNYPNEU | UZMWTYHX | CWCQCGOF | |
| JVILDOVY | KBHBCIHO | ZZVNHLPP | |
| OPXLKOZM | JCZHRFIY | HVVXCQAB | |
| LNMQXIRF | WCUQFVME | PZDILCST | |
| STAVENEW | NQYGXLEQ | FEOSMTCT | |
| LNRZGHVQ | FBGIIXAY | HKKGREUF | |
| JRHNAXRI | HECGERHH | LLORNOXS | |
| DBGHYDUY | JMTOEFKJ | YFXMKBAR | |
| FQVZZQME | TSIBBXDZ | CCMOHFNK | |
| JPBGCMUC | UTCHDJEC | KADAPXNI | |
| LFPIXIMA | HVDMTXWL | TJNGRZRZ | |
| JQIAJUWS | OQKXQJYE | JEJYQAGW | |
| SYEQTXVR | OANIHXBX | IIWWYLNR | |
| NBBXOKYQ | MYJMREXO | ORKDXYWC | |
| ECLBHYLY | PAIXRZNA | QOZHNAWB | |
| XFXUBBBQ | CWGFTVNA | DJVECLVV | |
| WALLLAYE | IIWXNAZW | VYKINFMV | |
| HREWAGHX | EJMASEQM | RGRDKVCN | |
| PXNUWHKT | OZCURUBX | VYJSLHVA | |
| UDJQIJCA | OCTDMELH | XVIJESOM | |
| UNMCHQCZ | QFAPAIZG | EJSVOKAC | |
| YVIRXMKK | KQBCRDJD | XMCZIQLK | |
| EWVLWJVJ | WHNBXGLK | GCASTEVX | |
| QNIOFXUI | HEBYIGOE | UJUPRFBV | |
| KSHAJJAG | DOVFDBPY | YUTHLYNJ | |
| IYZDCPST | QIGINZGH | JVFOSLDU | |
| FUNJQKQK | NNWLRQSH | EDNWQDFW | |
| EGHQNASF | FQWAWHTX | UNLQCFMF | |
| QFUFUSVI | CASBIYHI | OLQLRRGW | |
| HQDVZCSR | CGFOEALV | JADEFEPS | |
| DHUUFFMP | PQPBSGWM | LRSTCHDP | |
| BYKSNPGW | CXTZUHET | LHNKWOFF | |
| FUYVWTJR | PZENKFBI | FOMWPTJL | |
| UQXOOMTX | IJXVCUAS | KNPREQZX | |
| JIGRKOBW | IIKHILMV | EMOQKHED | |
| YLNSNWWW | EGMHAYZA | TNAMYCCP | |
| GMBIBKWO | TJNFEGQY | GHSOLUOV | |
| XQXIVUTM | OHMPCMLK | CGTNUUYC | |
| HYCZVABD | SVUSKRDA | QXWNPHQT | |
| QCKXAOOW | SPYJELJP | LDZUXTTT | |
| SDMLIJOP | IIAUZLPQ | JXNGOZMC | |
| NNMCJDNI | YUGIJQCA | PWRGRINL | |
| MHGXRTQY | BPNNVXOY | IVIGIPRD | |
| XVJXAAQZ | DBYIKUOC | HAYWXQIU | |
| HVJAOIZR | KLCWYCWP | OLOPSTXR | |
| MSOLIXWX | EYODVVCI | WYQDRJOA | |
| CXVPXBDT | AXTZFILG | FUAFWZZY | |
| YCZAJZSV | CBOSDEKG | SUMYDMFA | |
| RVTISFCK | QTUCCUOO | DHWCVDWJ | |
| HAHSNMMJ | GTMTUWEK | XOGCTPBT | |
| UDWXUKCA | OWAKRIYY | QKVXQOLK | |
| TGBGQCYP | CNKXLWCM | XGBTMFFF | |
| QUXRNWYJ | HURVWWXK | ULFMBGYR | |
| KLPJUBQS | XFZWSEHD | JEAZKNBT | |
| MAINOPID | OMQXYNLP | WZLXODIK | |
| DAAUBENP | FKOZKBXS | XMKCIAAL | |
| WCZVETMV | CYWLYJOS | ELKIWBEH | |
| LMBIRDKL | MHGOGHZN | FPDWAYML | |
| VDGMHLIU | NINAWFFO | IHIHAFPO | |
| NNMPZHMP | ZOLXXEPK | YWTYXJRF | |
| SKVIQGMV | QVFPIVXR | QDEAPDVE | |
| FNBAGIYE | BHFAQVGL | XKOUVXOJ | |
| KZGPIDBR | HXWABDQL | AWCAXXLT | |
| MBUNCNPD | TNBYJFRB | EVLYIMQR | |
| KSBPNVCI | WKWGJVEH | EIATAFQK | |
| FNIHKUGV | VQNSFLQN | OKCTSNCC | |
| UOHMNQWB | JAMWRFNX | BHFPWOAY | |
| ASIGKORG | AYJDHQFP | QCCQQAQA | |
| FIIKHVDO | YTCDMGBR | SVLYIJGP | |
| FXMTBJYU | PQNGIHKM | QQGRQLMH | |
| HVNNXNRE | HNEGOWWU | MWQHBZQW | |
| SRQYHXFI | JBFGJFTH | KDLOHAJN | |
| GGEPNCEY | FRIKZJFV | NPLWNXZO | |
| HYWIXKJK | XOPGIRIM | QFRCBGOE | |
| FAQIWUJI | ICGUVJPD | MLCCVTZL | |
| JGATMAUF | FKAWLJIX | YVXDSWWF | |
| HYPFJGIW | QYKOURPJ | ZKGMPHOZ | |
| UAWAHQZW | RFXZYSIX | EUNTULUC | |
| MTGIFHLP | JTRRFMTZ | SQHLTSSH | |
| RWHVWXLQ | GVHVHOGX | VOHAJAMO | |
| SCEPPAVB | BMARADKW | QOHOJKMR | |
| CIFBIJDE | EKAEVPOG | IDLJXFXP | |
| GPQSPXCP | EZXMFMUZ | VDQUEDGE | |
| KHSMEZRY | VVTSYBME | TCNSMJZO | |
| EUQXLUJV | KDQVGAVC | HUJBMZKT | |
| ZYQCHURK | AVFNLXTK | CUGAAYQG | |
| VTTJGTHQ | QPQCBCHM | LIYUPMYG | |
| PKNRYYAV | RYLVZUQT | MLZGZJZX | |
| XWFACJZB | JDNRNHOT | PQBTNIVJ | |
| PYWWGTHG | OIQYCDVD | GLROYSPM | |
| EDHLYMGA | QPGHEEVS | EHPHMVFC | |
| FVDOSFWP | XOKGNWHY | MCVHRBNS | |
| RPOEHIFW | VPXMDABI | TXRCMJBK | |
| VURWAQTU | NDZNGQPP | IWLCGXQT | |
| AOKVFIBQ | UNRXWEBM | BSYAORDG | |
| TCHOVMJP | GZYGURHQ | MJQNMPWZ | |
| BOWQZDGB | NLOIZILG | NLZHMSGS | |
| MDHOENPK | UQLJBTWQ | ZWMDLNIW | |
| YIGBURTS | SQUZCEAT | BOUIWPMW | |
| NXTIUHRT | POGVQZMZ | NKJBGWTZ | |
| ORFUNXSM | QKQKEFNJ | ICNRSJCI | |
| ASEMPPBH | PCNVKZTQ | NSNSCGRV | |
| CYWNGSID | OXOQTZZT | BMIZOHLT | |
| SVTQQJNO | QIYRWNTD | WOKJNGSC | |
| HSCFZBDR | AHRVQFVJ | YBDJSHHA | |
| QNTAZUAU | WXRESTIF | TQUSOFCL | |
| PCSPCOIL | LRVKWOCI | VTBSPEFL | |
| FYNJAQWC | VRBEXQZI | SHCHRDTX | |
| ZXHMVPKZ | JQUMIKKA | DGMFRIOJ | |
| FHSCVTOE | SZSDJFHV | VTDSKKVV | |
| YYTPUDJT | LEEVKSPH | PKLJVTJX | |
| BZAEUZAP | VILYVIQG | RXIGLYBH | |
| WTCKLMTQ | UOJGESJZ | NEGQGRWM | |
| VDIDLZNS | NHTYKKCW | UWGSVFEH | |
| TRMHJFGH | ZPEGDYEI | ISFWMPWY | |
| UTBYQVWA | QTAFNJNR | UXMYKBIE | |
| EGKQPBNG | RQRJZNXL | BYHILBVR | |
| NPDPNFIA | VUFRGLGQ | ZHEOOGNS | |
| SCTHANCT | XBRTTSQY | WQHGLKWK | |
| PNJXHJDX | SMMXDZOE | RJNDYQAA | |
| RCNGMZXO | RMBGYLPQ | HMXPXRJW | |
| ASXGQBFK | VPEQRHYZ | XSECQFBO | |
| YWZHCGSK | LMKSESTW | AWZRKIHG | |
| XALURUPO | QAORUGBH | XOMPKTAD | |
| PQWYKLZJ | ZDAESHXT | FYXJHBQK | |
| COQGDCMU | XHDCJMRB | DVRDBLGY | |
| JPRRJTFW | ZTDAJQJJ | SWFDSPEB | |
| CIACLRON | NSWFOOCX | TAANKWMT | |
| SLDBPHCS | YXYTQIYD | EQGKAKII | |
| VWDAJVEP | OPPIIIPB | UOQDUDIE | |
| JJBJHQHT | EEPFADTF | VGDCTKQS | |
| RIIZSANA | MDPZPFJS | ZSLYOMZS | |
| SNSFHVIK | UNUEJAHS | GZNJEWAK | |
| KCOPBCAF | IIHXSFOQ | ZFXNBPVE | |
| APEEZVZY | QFXHWVHO | XMZLRZVM | |
| MHFACCMB | IOEYRMWE | HKSUIZYZ | |
| SWBACOLS | SJDVPPPN | OSDRSNTA | |
| ZLLEVZMI | NHQCCEVH | QGGCURWQ | |
| BWASWFJV | GIJFZUIH | JSFWZVHZ | |
| GMUMBWQO | MOGUUYGL | IMBQEXDY | |
| GWUZMITE | DCJNYESQ | BKJKAEFV | |
| XLPYGKBU | KAANMWWA | OWFPPPDW | |
| PIANEEFU | JGGFMIGN | TYTGRPPY | |
| NODTHJPO | KIWHGUGX | UTLGYHQP | |
| HHOYRRPC | KLLHKBQL | PHAFMOTY | |
| ZNWDVNEQ | JBAMEKIL | PJJXMDPP | |
| PFSODUVG | WNYVIQYL | LIRJVQYR | |
| KPKYNQJD | WQYVTOJP | ZSMZMJXX | |
| TLPJRKXU | HHIBTIOW | BEWUMZUC | |
| JDNHPZQJ | VBETKBLT | KBAVISDC | |
| CMULXVJQ | QYMVNGJG | LXZBSHMB | |
| EWYXPTAB | VNCKWGTD | HBUQOKHV | |
| ULCEQMWJ | IYLIHLXD | VSYOPYSN | |
| ITFVMUFJ | SVMLOQOK | CJVYJAPS | |
| HWHWIKDS | BSBOMFJJ | PKUGBDLZ | |
| RMCKQYLC | KXLOULIT | HFDPAZKE | |
| AZGRNACP | YUNYZOAR | SALJDBML | |
| KMGWKZRW | BUANIHZV | HBXZWVYJ | |
| EFBFHOKD | GQYNSYZE | SKNOXTTL | |
| DQRKQJHJ | YUWZGSNQ | SKGYDIFY | |
| JDGYSVZI | ABMLQMWC | QIMVRKFL | |
| APWHKWNT | VLSYMVYD | NWCVFAXK | |
| BWKGBLGM | XIUCRZPN | MTRBXHWP | |
| FTFYFSEY | THOYRPOO | GXRFFYEU | |
| PNPDGVDS | TWZJIOZW | CYPMDXFR | |
| YRYZYQYZ | AMKTPVBR | OILVFTQA | |
| RNENAHUA | YHWRWGRZ | DDMGZWUL | |
| GGEZOKHT | QIRDUGRR | PGABOSJW | |
| UQTJDZGC | SPPAIEUS | OQVMZCAJ | |
| GNWMORVE | BTISBLTE | MVBZNGSJ | |
| LEZLRBPH | BMUXHLSZ | MADEGRKG | |
| XCLOWSDX | AIJACZFP | BFDJRTJU | |
| HOZQYKGW | AMZIDYAQ | FBVNPCBV | |
| PYTSVUEB | IQNYPDBS | OWEVJIJI | |
| YKLDUCMP | STKIDRFK | PSEEWVCW | |
| YFFFOKIU | CCXZAKCS | FNCPKDBZ | |
The spinners above are fully customizable and mostly created using CSS and a bit of Javascript. There is no call to an external server, there is just a sort
of randomly generated strings in a table column, which is long enough that some indication of the page doing work is needed to keep the interest of the person using it.
The code is very easy to use as is, as all it is doing is allowing a CSS animation to be seen when work is done and to make it unseen when the work is over. It can be used
through an onclick method or even by creating a event handler and takes only three inputs.
1) The ID of the CSS animation to be displayed
2) The Interval the routine will check to see if the work is done
3) The function the the "Spinner" function should call
Below is the actual code.
function SpinWorkingTask(spinid, interval, func) {
/* make the indicator you are using to show a task is working visable here */
document.getElementById(spinid).style.display = 'block';
/* create the task complete indicator */
var TaskComplete = 0;
var id = setInterval(frame, interval);
function frame() {
if (TaskComplete == 1) {
document.getElementById(spinid).style.display = 'none';
clearInterval(id);
} else {
if (TaskComplete == 0) {
func();
TaskComplete = 1;
}
}
}
}
