Geek Answers Handbook

JQuery loading text

Trying to make text ... loading animation

here where i stand: http://jsfiddle.net/aGfct/

I can get ... to add at intervals of 500 ms, but then I want to delete them, and then start the animation before / before the download is complete (basically it can loop forever and I will disappear when done).

Any help would be great.

Thanks.

_charlie

+7
source share
5 answers
i = 0; setInterval(function() { i = ++i % 4; $("#loading").html("loading"+Array(i+1).join(".")); }, 500);

If you want to change the line after 5 it says that after 10 iterations. This can be done as follows.

 i = 0; text = "loading"; setInterval(function() { $("#loading").html(text+Array((++i % 4)+1).join(".")); if (i===10) text = "start"; }, 500);
+23
source

http://jsfiddle.net/paska/aGfct/12/

 var originalText = $("#loading").text(), i = 0; setInterval(function() { $("#loading").append("."); i++; if(i == 4) { $("#loading").html(originalText); i = 0; } }, 500);
+7
source

I have a solution very similar to roXon, only in my case 2 functions were added.

  • Just add an empty element with id = loadDots, for example span id = "loadingDots">
  • Add function call to document.ready. Now in my case, I needed to display loading points on some pages, but not all. Thus, the function will look for an element with id = loadDots, and if it is not found, it will clear the interval.

Demo in JsFiddle

[HTML]

 <!--Just have an element with id=loadingDots--> <span style="font-size:42px">Sending<span id="loadingDots"></span></span>

[Js]

 $(document).ready(function(){ /**Call the function in document.ready somewhere*/ showLoadingDots(); });

Function

 var showLoadingDots = function() { /**If element not found, do nothing*/ if (!$("#loadingDots").length>0) return false; var showDots = setInterval(function(){ //Thanks to roXon, StackOverflow var d = $("#loadingDots"); d.text().length >= 3 ? d.text('') : d.append('.'); },300); }

Hope this helps someone. Thanks roXon for the ideas.

+3
source

Try using setInterval in the same way as:

 setInterval(function(){ for (i = 1; i <= 3; i++) { setTimeout(function() { $("#loading").append("."); }, i * 500); } $("#loading").html('loading'); }, 2000);
+2
source

Just add this line to the end of the loop:

 i = (i === 3) ? 0 : i;

This is simply an abbreviation for the word "if i is 3, set it to zero, otherwise leave it as it is." This should start the cycle again until you set the exit condition.

EDIT : go on, I really didn't look like you added . (sorry, I can not get jsFiddle to run anything at the moment)! If you used i reset as above, you really need to set the number of characters . equal to i with each iteration.

EDIT 2 . Once again, looking at this, you even need to take i in close to get its value at the time the setTimeout declaration otherwise you will get any value when setTimeout executed , which is unpredictable. In principle, do not use this solution - use Jeff's !;)

+1
source

More articles:


All Articles