1

I have a bootstrap modal and in the modal I have a button, on clicking which the spinner shows up. The spinner is not centered to the webpage but centered to the modal i.e if I scroll my modal up, the spinner goes above as well. I want my spinner to be in the center of the view regardless of the position of my modal.

My CSS for spinner is as below -

.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;
}

I have placed a div inside my view page as below -

<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>
rjlion795
  • 515
  • 1
  • 5
  • 16

1 Answers1

0

Try the following CSS in your .spinner-overlay class:

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    pointer-events: none;
}

This will make it full-screen (the spinner will be centered according to view-port) and will also let user to click "through" it.

treecon
  • 2,415
  • 2
  • 14
  • 28