In my Bootstrap modal, I have a button that triggers the appearance of a spinner. However, the spinner is currently centered within the modal itself. This means that if I scroll the modal, the spinner also moves along with it. My goal is to have the spinner always appear at the center of the view, regardless of the modal's position.
Below is the CSS code for the spinner:
.spinner-overlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(58, 58, 58, 0.69);
z-index: 10000;
}
.spinner-align {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.spinner-border {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: .25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spin .75s linear infinite;
animation: spin .75s linear infinite;
}
To address this issue, I inserted a div into my view page using the following code snippet:
<div class="spinner-overlay" style="display: none;position:fixed;">
<div class="spinner-align">
<div class="d-flex justify-content-center text-center">
<div class="spinner-border text-light" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>