Question 36847 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

how to show a loading div for 5 second when button click then redirect to next page – Jquery

I’m working on a quiz project. after giving answer when a user clicked the button I want to add a loading div for 5 second then redirect to win or lost page.Also let me know the css to cover whole screen.

below my code but this not working for 5 seconds…

<div id="spinner" style="display:none">
  <img src="/sites/all/modules/custom/admin_job/assets/images/spinning-loading.gif">
</div>

<script>
    $(document).ready(function() {
  $('#edit-submit').click(function(){
    $("#spinner").show();
  setTimeout(function() { $("#spinner") }, 5000);
  });
});
</script>
Tags:

3

Answers


  1. 0

    I believe that this is more along the lines of what you would like:

    setTimeout(() => {
  document.getElementsByClassName('spinning-icon-two')[0].style.display = 'none';
  document.getElementsByClassName('hidden-page')[0].style.display = 'block';
}, 5000);
    .spinning-icon {
  display: none;
}
    <div class="hidden-page" style="display:none;">
  This was the hidden page while the div was shown the loading icon.
</div>

<div class="spinning-icon-two" style="width:100%;height:0;padding-bottom:100%;position:relative;"><iframe src="https://giphy.com/embed/t8WHEAfuku6muxkGPo" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
<p><a href="https://giphy.com/gifs/perfect-loops-t8WHEAfuku6muxkGPo">via GIPHY</a></p>
    Login or Signup to reply.
  2. 0

    As I said in my comment you miss a .hide() in you timeout function

    $(() => {
  $('#button').on('click', () => {
    $('#spinner').show()
    setTimeout(() => {
      $('#spinner').hide();
    
  }, 5000)
  })
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="spinner" style="display:none">This is a spinner</div>
<button id="button">Click</button>
    Login or Signup to reply.
  3. 0

    This should do the trick. You can modify it accordingly to fit your need.

    $(document).ready(function() {
  $('#edit-submit').click(function(){
    $("#spinner").css('display', 'block');
    setTimeout(function (){
      location.href = 'https://jsfiddle.net/TebogoJSF/sp5kzq2m/5/';
    }, 5000);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="spinner" style="display:none">
  <img src="https://media.giphy.com/media/3o7bu3XilJ5BOiSGic/giphy.gif" width="25">
</div>
<button id="edit-submit">
Click Me
</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search