Skip to content

How to load form after loading animation

I am trying to load a html form which has submit button after end of a loading screen/animation..

In short, First loading screen or animation shoul run.. It shoul run for 15 seconds…

Then, form should load.

Here is my code

<div id="load">
  <span>Loading...</span>
 </div>
<div id="loader">
   <form method="POST" action="submit.php">
    <button type="button" class="btn btn-primary" id="btnsubmit" name="btnsubmit">Submit </button>
    </form>
</div>

Here is my jquery

$(window).load (function (){
  $('#loader').fadeOut ('slow', function(){
  $('#load').fadeIn ('slow');},15000);});

My codes not work… can anyone help me? Please

Answer

The function .fadeOut (https://api.jquery.com/fadeout/) has only the parameters [duration ] [, easing ] [, complete ]. The timeout must therefore be managed with Javascript.

The #load is hidden by default with CSS. The timeout function waits as long as defined in waitTimeUntilFadeOut. Then #loader is faded out and #load is faded in within the complete function.

$(window).on('load', function(){
  var waitTimeUntilFadeOut = 2000 ;
  setTimeout(function() {
    $('#loader').fadeOut ('slow', function() {
      $('#load').fadeIn ('slow');
    });
  }, waitTimeUntilFadeOut);
});
#load {
display:none;
}
<html>
<body>
<div id="loader">loader</div>
<div id="load">load</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>