Using CSS animation while javascript computes

Question

I am developping a web application that needs to generate and compute a bunch of arrays at startup. I would like to show a loading page while this occurs, and maybe play a little with css animations, but it seems that CSS animations will hang while javascript is executed. I already have a loading bar that is updated on key events of the processing, but I would like to use css-transitions to smooth it a bit.

I was wondering if there is any way to let something animate while the javascript is executing?

I know I can manage to give back control to the browser from time to time to let it refresh, but I find it silly that computing something in background with javascript just freeze your whole interface.

EDIT: Here is a dumb example of what I am talking about: http://jsfiddle.net/YWefx/13/ If you disable the css transitions, the bar is updated on each iteration, but if you enable it, the transition will only occur at the very end. So I end up with either having to wait 400ms between each loop, loosing 4 seconds doing nothing but animations, having a smooth animation at the end (loosing the benefits of displaying a progress bar), or not animating the bar.

I believe that jquery animations have the same limitations, that is that any intensive computation will freeze them down. As for gif image, they would work for a repeating "waiting" icon, but not for smooth effects in a loading bar for instance. — TonioElGringo
– TonioElGringo, Commented Oct 5, 2012 at 19:47

Dcullen · Accepted Answer · 2012-10-05 19:49:34Z

3

CSS3 animations do not get blocked by Javascript unless there is some intense processing going on (in which case you could get stutters).

If you are triggering them during the load I could see them getting delayed until they get to that portion of the script.

One way around this is to setTimeouts at the very beginning of the script to trigger animation changes at certain times.

Another (perhaps better) option would be to use keyframes. Make sure to call this before the loading begins. http://dev.w3.org/csswg/css3-animations/#keyframes

answered Oct 5, 2012 at 19:49

Dcullen

6694 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Shmiddty Over a year ago

This won't answer his question. If javascript locks the browser thread (long running series of code), CSS animations will STOP. See here: jsfiddle.net/Shmiddty/8p5Ah/1 The animation doesn't resume until after the while loop has finished.

TonioElGringo Over a year ago

Exactly, I edited my question with another example, focusing on my actual problem.

Dcullen Over a year ago

This worked for me: jsfiddle.net/8p5Ah/5 (not browser tested, just chrome)

Dcullen Over a year ago

Another option would be Web workers, but i have not tested this usecase yet. developer.mozilla.org/en-US/docs/DOM/Using_web_workers

TonioElGringo Over a year ago

Ok, I now understand that I should not talk about css animations, but rather css transitions. Should I post a different question for this matter? I also think that Web workers can be the solution for my issue.

|

Collectives™ on Stack Overflow

Using CSS animation while javascript computes

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related