I have the following code for a preloader on my site:

setTimeout(function() {
  document.getElementById("loader-wrapper").style.display = 'none';
}, 1250);

<div class="loader-wrapper" id="loader-wrapper">
  <div id="loading">
    <div class="loader"></div>
  </div>
</div>

I have the following code for a preloader on my site:

setTimeout(function() {
  document.getElementById("loader-wrapper").style.display = 'none';
}, 1250);

<div class="loader-wrapper" id="loader-wrapper">
  <div id="loading">
    <div class="loader"></div>
  </div>
</div>

Currently the div disappears after 1.25 seconds, but how do I make the loader-wrapper fade out after those 1.25 seconds (without using CSS or jQuery)?

• javascript
• html

• 3 Out of curiosity why do you want to avoid using CSS (I fully understand wanting to avoid jQuery), which has support for transitioning visibility, opacity, colours and any other properties with numerical property-values? – David Thomas Commented Jan 7, 2018 at 23:33
• @DavidThomas mostly because I have a lot of interfering CSS (my fault for borrowing CSS from my other projects) and I'd much rather use javascript then hunt down the interfering code – Owen Sullivan Commented Jan 7, 2018 at 23:36
• 3 While it's your prerogative to do as you wish, I will point out that that approach is likely to cause you problems with the vast whorl of spaghetti at a later point. You'd be much better off untangling everything at the beginning, rather than the end (or any other point). – David Thomas Commented Jan 7, 2018 at 23:39
• Probably a duplicate of Fade element in and run a callback, just reverse to fade out instead of in. There is also Fade element from specidied opacity to specified opacity? Once the element is fully faded, remove it (or set display:none). – RobG Commented Jan 7, 2018 at 23:39
• @DavidThomas if I were to do it using CSS, how would I? I tried using visibility: visible; and opacity: 1;, then transition: visibility 1s, opacity 1s linear; but that didn't change anything – Owen Sullivan Commented Jan 7, 2018 at 23:42

3 Answers 3

Look into object.style.transition JavaScript syntax.

Here is a simplified running example of @Owen Sullivan's solution.

setTimeout(function() {
  var loader = document.getElementById("loader-wrapper");
  loader.style.transition = '.5s';
  loader.style.opacity = '0';
  loader.style.visibility = 'hidden';
}, 1250);

<div class="loader-wrapper" id="loader-wrapper">
  <div id="loading">
    <div class="loader">loader</div>
  </div>
</div>

You can do it with using of inline styles on the loader element:

<script>
  setTimeout(function() {
    var el = document.getElementById("loader-wrapper");
    // 1s - time of the animation duration
    // set transition property for webkit browsers only
    el.style.WebkitTransition = 'opacity 1s ease-in-out;'
    el.style.opacity = '0';
  }, 1250);
</script>

JSbin link.

To set transition for all browsers you need to set all transition properties. You can get if from this question.

For more information and animation examples check this question.

What ended up working for me:

<script>
  setTimeout(function() {
    var loader = document.getElementById("loader-wrapper");
    loader.style.WebkitTransition = 'visibility .5s, opacity .5s';
    loader.style.opacity = '0';
    loader.style.visibility = 'hidden';
  }, 1250);
</script>

This sets the visibility to hidden and allows all the content underneath the loader-wrapper div to be interacted with (in my case, buttons and forms).