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">
<div id="loader">
   <form method="POST" action="submit.php">
    <button type="button" class="btn btn-primary" id="btnsubmit" name="btnsubmit">Submit </button>

Here is my jquery

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

My codes not work… can anyone help me? Please


The function .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 {
<div id="loader">loader</div>
<div id="load">load</div>
<script src=""></script>