CODEWITHSUNDEEP
javascriptjqueryhtmlcss
shadab momin
shadab momin

Reputation: 139

How to have a Loading Spinner Animation on top of a Bootstrap Modal

I am trying to have a spinner animation on button click. This Works fine from a page when there is no Bootstrap Modal Open. But when a Bootstrap Modal is Open, the Spinner hides behind the Bootstrap Modal

I have tried this

Expecting the Spinner to be above the Modal Bootstrap

Upvotes: 13

Views: 15574

Answers (3)

Partha Mukherjee
Partha Mukherjee

Reputation: 43

Provide the z-index value. Thats creating issue

z-index: 9999;

Upvotes: 1

xmaster
xmaster

Reputation: 1050

Change the place of your loadingoverlay. the loadingoverlay has to be in the modal.

Example

Need to also give the setInterval for javascript spinner.

Upvotes: 4

Feralheart
Feralheart

Reputation: 1928

You have to give a bigger z-index to the Loading Spinner, than the Modal's z-index.

Let's try this:

#loadingoverlay {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.6);
}

Upvotes: 3

Related Questions