title: Loading Screen with Minimum Display Time
body: <p>I have a fixed div with a solid background and some text that I am using as a loading screen that fades out when the the page is fully loaded via $(window).load . The catch is since there is actual information on the loader, it needs to be up for a minimum amount of time before fading out. However, in the event that the page loads faster than that minimum time, I do not want it to disappear early, and I also don't want it to stay up past the minimum time once the site is loaded as well, and this is where I am stumped.</p>
  
  <p>Logically it needs to operate like this:
  -fade in, wait 5 seconds
  -page loads
  -if 5 seconds has passed, fade out immediately
  -else wait out the remaining time ONLY, then fade out (in other words, don't start counting 5 seconds after onload)</p>
  
  <p>I usually just have an easier loader that displays immediately and then I addClass to hide it via CSS transitions on opacity after onload, but since I need to fade the loading text in and then out and also maintain a minimum time without just adding it as a delay after onload, this is a bit trickier.</p>
  
  <p>This was asked here a few years ago but without a proper answer: <a href="https://stackoverflow.com/questions/20123991/jquery-loading-screen-with-minimum-viewing-time">jQuery loading screen with minimum viewing time</a></p>
  
  <p>Would prefer to stick with JS/jQuery &amp; CSS. Any help would be greatly appreciated, thanks!</p>