CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
Houssam Hammouda
Houssam Hammouda

Reputation: 41

Show Loading indicator on Bootstrap 4 (Modal) dialog

I have a simple question about Bootstrap 4 with simple trick I want to show a Loading indicator such as Twitter in Every time the user opens the modal. I make some codes and it works well but I lost some pieces ....

Button HTML Codes :

<a href="#example_Modal" role="button" data-toggle="modal" data-target="#example_Modal">Click here</a>

Modal HTML Codes 

<div class="modal fade" id="example_Modal" tabindex="-1" role="dialog" aria-labelledby="example_ModalLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">

<!-- Preloader -->
<div id="modal-preloader">
    <div class="modal-preloader_status">
        <div class="modal-preloader_spinner">
            <div class="d-flex justify-content-center">
                <div class="spinner-border" role="status"></div>
            </div>
        </div>
    </div>
</div>
<!-- End Preloader -->

<div class="modal-body"></div>
<div class="modal-footer"></div>

</div>
</div>
</div>

Jquery Codes

$('#example_Modal').on('shown.bs.modal', function () {
    $("#modal-preloader").delay(5000).fadeOut(100);
});

as you can see here it work well but I want the Loading indicator spinner show eveytime when the user close the modal and open it again I think I explain well what I Want... thank you

Upvotes: 0

Views: 9281

Answers (1)

Ashish Patel
Ashish Patel

Reputation: 442

You can achieve that by defining handler when modal closes. Please run the working code snippet below.

$('#example_Modal').on('shown.bs.modal', function () {
    $("#modal-preloader").delay(5000).fadeOut(100);
});

// reset loading display when modal is closed
$('#example_Modal').on('hidden.bs.modal', function (e) {
   $("#modal-preloader").show();
})
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </head>

  <body>
    <a href="#example_Modal" role="button" data-toggle="modal" data-target="#example_Modal">Click here</a>
    <div class="modal fade" id="example_Modal" tabindex="-1" role="dialog" aria-labelledby="example_ModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog" role="document">
        <div class="modal-content">

          <!-- Preloader -->
          <div id="modal-preloader">
            <div class="modal-preloader_status">
              <div class="modal-preloader_spinner">
                <div class="d-flex justify-content-center">
                  <div class="spinner-border" role="status"></div>
                </div>
              </div>
            </div>
          </div>
          <!-- End Preloader -->

          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

There is also other way to achieve that by simply modifying the shown.bs.modal handle like this:

$('#example_Modal').on('shown.bs.modal', function () {
  $("#modal-preloader").show().delay(5000).fadeOut(100);
});

but it appears glitchy when you re-open the modal. So i recommend using hidden.bs.modal to reset the loading section display inside the modal.

I hope this answers your question.

Upvotes: 3

Related Questions