Display a Loading Indicator within a Bootstrap 4 Modal Dialog

I have a question regarding Bootstrap 4 and a simple trick I am trying to implement. I am looking to display a Loading indicator similar to Twitter every time the user opens the modal. I have some code that is working well, but I seem to have misplaced 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);
});

It seems the loading indicator spinner only shows once when the modal is opened, but I would like it to display each time the user closes and reopens the modal. I hope that explanation clarifies my issue. Thank you.

javascriptjqueryhtmlcssbootstrap-4

Answer №1

To achieve this, you can set up a handler that triggers when the modal closes. Run the code snippet provided below to see it in action.

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

// Reset the loading display when the 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67170817170215490d1427564956514957">[email protected]</a>/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>

Another method to achieve this is by adjusting the shown.bs.modal function like so:

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

However, this may cause glitches when reopening the modal. Therefore, I recommend using hidden.bs.modal to reset the loading section display within the modal.

I hope this solution addresses your query.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for sending a large list as Ajax data in an MVC model

My morning was spent in vain as I attempted different "workarounds" that were suggested, usually for more specific scenarios than the one I am facing. My goal is to simply pass an ASP.NET MVC model using the JQuery load method. It seems promising when I us ...

jqueryajaxasp.net-mvc

Nested checkbox table toggle/Select-Deselect

I have created a page that includes a nested table with checkboxes for selecting all the table cells <td>, as well as checkboxes for each individual table cell <td>. My goal is to: CheckAll checkbox should be able to check/uncheck all the pa ...

javascriptjquerycheckbox

Guide on moving elements to a different list with the help of the Angular DragDrop CDK Service

I encountered a unique situation while working on my project where I needed to implement a drag and drop feature for multiple lists using Angular CDK's DragDrop service. While I was able to successfully move items within a single list, transferring an ...

javascriptangularangular-materialangular-cdk

I am experiencing difficulties with broadcasting and attending events

File.js scope.menuItemClick = function (def, callbackText, keepMenuOpen) { console.log(def); if(def.automationId === "Print"){ console.log("before send"); $scope.$root.$broadcast("printingData","my Data"); console.log("after send"); } Nex ...

javascriptangularjstypescriptangularjs-directive

Creating an overflow effect for sliders using only CSS

Is it feasible to develop a slider that extends beyond its parent elements and the body? The concept involves having content within a section housed in a container. The slider would be part of this section, with slides overflowing past the parent element ...

csssliderpositionoverflow

Using the Nodejs Array prototype filter method within a JSON object

Attempting to create a function that filters and returns specific strings within JSON data. Any advice is appreciated. Thank you! [ { line: '{"status":"waiting"}' } ] var body_W = []; body_W.push({line: JSON.stringif ...

javascriptnode.jsarraysjson

Learn the steps to initiate a Vimeo video by simply clicking on an image

I have successfully implemented some code that works well with YouTube videos, but now I am looking to achieve the same effect with Vimeo videos. Does anyone have suggestions on how to do this? I need to replace the YouTube description with Vimeo, but I&ap ...

javascriptjqueryhtmlajax

Removing multiple tables simultaneously and encountering an error while utilizing ajax response text

I am facing a couple of challenges. First Issue: I encountered a problem while trying to delete groups from two tables in the database (gmembers and groups). My goal was to check if a user left a group, and if there are no remaining members in that g ...

javascriptphpmysqlajaxresponse

"Encountering issues with logging in through AngularJS and the $http request functionality

My goal is to login using $http and GET of REST web services. This is my approach: Retrieve data based on username and password using $http.get Store the result in $scope.getResult=res; Assign variables to the retrieved data: var result=$scope.getResult ...

javascriptangularjsrestionic-frameworkhttprequest

Steps to prevent uib-timepicker from automatically adjusting time based on the Browser Timezone

Currently in my database, timestamps are stored in UTC format. On the frontend, I am implementing uib-timepicker for time editing and updating purposes. However, I do not want uib-timepicker to automatically convert the time from the server's timezone ...

javascriptangularjsdatetimeangular

I'm experiencing difficulties with updating my model while utilizing the ngResource module

Encountering a minor issue with Angular at the moment. Employing the $ngResource module to fetch "comments" from my server: var app = angular.module('app', ['ngResource']); app.factory('comment', function($resource) { r ...

javascriptangularjs

The layout of my website appears distorted on mobile devices

When I view my website, http://www.healthot.com, on an iPhone or other mobile device, the page doesn't display correctly. It scales the window, requiring me to zoom out to see the entire page. To better understand the issue, please refer to this photo ...

javascriptjqueryhtmlcssmobile

Glistening R resize plotOutput

Attempting to resize a plotOutput using Shiny R. The plot in question can be viewed https://i.sstatic.net/fgzag.png This is the code snippet: #In ui: fluidRow( column(width = 12, h4("Diagrama Persistencia"), plotOutput("Dia ...

htmlcssrimageshiny

What is preventing the addition of links to the navigation bar when using a sticky navigation bar?

Currently, I am in the process of developing a blog website using Django. One of the features I have successfully implemented is a sticky navigation bar. However, I am facing a challenge with adding links to the menu on the navigation bar due to existing ...

javascriptpythonhtmlcssdjango

Changing the colors of multiple buttons in a React Redux form: a step-by-step guide

When using Redux Form Wizard on the second page, I have two buttons that ask for the user's gender - Male or Female. The goal is to make it so that when a user clicks on either button, only that specific button will turn orange from black text. You ...

javascriptreactjsbuttonredux-form

Numerous instances of success.form.bv being triggered continuously

Can someone please assist me with an issue I am facing in submitting a form using BootstrapValidator? I have written the code below to make an AJAX call to a page, and upon receiving a successful response, it reloads the page using location.reload(true). ...

jqueryajaxbootstrapvalidator

Utilize an AngularJS controller to verify the presence of a cookie and display a modal pop-up

In the process of developing a Single Page Application (SPA), I have encountered an issue with an HTML element calling an AngularJS controller. Here is what I need: I want the controller to check for a specific cookie: - If the cookie exists, call a ...

javascriptangularjstwitter-bootstrapcookies

Select a Date: Input for Date Selection

Is it possible to restrict the selection of certain days using HTML date input validation? Some booking websites have a feature where an interactive calendar only allows users to select specific dates for events, while others are greyed out and cannot be c ...

javascriptphpjqueryhtmldate

Create a draggable and droppable file upload container that functions similarly to an input with the type "file"

My goal is to create a native HTML5 multiple file upload feature using drag and drop functionality. Despite following tutorials like and http://www.html5rocks.com/en/tutorials/file/dndfiles/, I have not yet found the exact solution I am looking for. Ess ...

jqueryajaxhtmldrag-and-drop

Encountering issues with running an AngularJS application (version 1.6) in Visual Studio following the activation of script

I am new to working on an angular 1.6 application and still learning the ropes. The project consists of an asp.net web api project that needs to be run before starting the angular project. Everything was running smoothly until I tried to debug a parameter ...

javascriptangularjsvisual-studiodebuggingvisual-studio-debugging