Understanding JS loading screens/animations

JavaScript
1

I am researching how set up loading screens using Javascript. I’ve come across a few ways to go about it. I found a JS script that waits from the presence of an element block to appear. Another uses JS promises and allows you specify scripts you want loaded.

However I am not clear on how to set up animations in conjunction with this. I know how to create animations using some libraries however I’m not sure if I understand the big picture. Is the idea behind javascript loaders that they load an animation and play the animation until they detect something has fully loaded? Are there dramatically different requirements for the script if you’re doing an SVG animation vs a Canvas or GIF? Does my question make sense?

2

Yep :slight_smile:

I usually opt for CSS animations for loading states, which usually means toggling a class of “loading” on an element, or the body if you want the loading state to effect multiple things on the page and showing/hiding different states based on that class.

Another option is to replace the content with js

<div id="content">Loading...</div>

After you’ve finished loading everything you replace the content with HTML from a template or HTML returned from the server.

Does that help?

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.