DEV Community

Discussion on: Adding a Loader Spinner in Gatsby site

View post
Collapse
 
thebuildguy profile image
Tulsi Prasad •

Hey Zakir, thanks for writing this post! It really works and is awesome.

However, do you have any ideas about how can we make the loader screen go away with a fade animation and not statically? I tried adding transition: opacity 0.5s ease into styles and this to gatsby-brower:

export const onInitialClientRender = () => {
  setTimeout(() => {
    setTimeout(() => {
      document.getElementById("___loader").style.opacity = "0"
    }, 500)
    document.getElementById("___loader").style.display = "none"
  }, 1000)
}
Enter fullscreen mode Exit fullscreen mode

But it still doesn't work. Can you enlighten me on why this is happening?

Collapse
 
blainesensei profile image
Blaine •

Thats because the display property does not support css animations.
You can try, jquery.fadeout or use style.opacity = '0' and style.visibility = 'hidden' with transition : all 0.5s ease