Quandary I am facing an issue with displaying a bootstrap spinner while a function is running. The spinner should be visible during the execution of the function and disappear once it is done.
Here is the code for the bootstrap element:
<div id="resultsSpinner" class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>The CSS styles for the spinner are as follows:
.spinner-border {
width: 3rem;
height: 3rem;
display: none; /* Initially set to not display */
}Next, here is the JavaScript code I am using:
function performAction() {
// Function logic goes here
const spinnerElement = document.querySelector('.spinner-border');
spinnerElement.style.display = 'initial'; // This should change the display property to show the spinner
}The issue I am encountering is that the spinner is not displaying at all with the current setup. It does show up when I remove 'display: none;' from the CSS file, but that is not the desired behavior...
Attempted Solutions I have tried various ways to make the spinner display correctly, but none have worked so far. One approach I experimented with is the following, but it did not yield any success:
function showSpinner() {
$(".spinner-border").fadeIn();
};
showSpinner();Any guidance on resolving this issue would be greatly appreciated. Thank you in advance.