CODEWITHSUNDEEP
htmlcss
user18265303
user18265303

Reputation: 3

How to vertically center a spinner?

I am using Bootstrap 4.

I have a spinner that needs to be centered vertically and horizontally.

There is a loading-container that contains the spinner and other elements of the site.

When the page spinner, the counter should be centered across the entire page, both horizontally and vertically.

But instead the container sets the max height to 100px.

And because of this, centering on the entire page does not occur.

How to center the spinner on the entire height of the page and at the same time not set such parameters in the loading-container min-height: 1000px;?

css:

.loading-container {
    position: relative;
    min-height: 100px;
}

.loading-shade {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 56px;
    right: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

html:

<div class="loading-container">
    <div class="row col-md-12 m-0 mb-4">
        <div class="loading-shade" *ngIf="loader">
            <div class="text-center">
                <div class="spinner-border text-primary size" role="status">
                    <span class="sr-only">
                        Loading...
                    </span>
                </div>
            </div>
        </div>
            <div class="profile" *ngIf="user">
                <h4 class="text-primary text-start">
                    {{user.fullName}}
                </h4>
            </div>
    </div>
</div>

Upvotes: 0

Views: 893

Answers (1)

aulia amirullah
aulia amirullah

Reputation: 196

Is it the result you are expecting?

.loading-container {
    height: 100%;
}

.loading-shade {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 56px;
    right: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
<div class="loading-container">
    <div class="row col-md-12 m-0 mb-4">
        <div class="loading-shade" *ngIf="loader">
            <div class="text-center">
                <div class="spinner-border text-primary size" role="status">
                    <span class="sr-only">
                        Loading...
                    </span>
                </div>
            </div>
        </div>
            <div class="profile" *ngIf="user">
                <h4 class="text-primary text-start">
                    {{user.fullName}}
                </h4>
            </div>
    </div>
</div>

Upvotes: 1

Related Questions