How to put a spinner in the center of a bootstrap 3 div col-md-x?

Question

I want to put a spinner inside a div that contains a video.

This video takes a few seconds to display as it is hosted on aws.

I have managed to make the spinner but it takes up the whole page. I can't get it to adapt to the div it is entered in.

#cover-div-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(0,0,0,0.7);
    z-index:2;
    /*display:none;*/
}

/* Safari */
@-webkit-keyframes spin {
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#cover-div-spin::after {
    /*position: fixed;*/
    left: 50%;
    top: 50%;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #c4040c;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

<div class="col-md-4" style="background:orange;">
  <span><b>Example</b></span>
  <div align="center" class="embed-responsive embed-responsive-16by9">
     <div id="cover-div-spin"></div>
     <video class="embed-responsive-item" src="" controls muted></video>
  </div>
</div>

https://jsfiddle.net/JorgePalaciosZaratiegui/pdzm1ano/17/

Any ideas to solve this?

Thanks in advance.

Answer 1

First, your #cover-div-spin should have an absolute position instead of a fixed one.

To understand more about positionning, let's read the MDN docs:

position: absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

position: fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport

I've also changed hte #cover-div-spin display:flex;, it will allow us to easily center the spinner.

#cover-div-spin {
    position:absolute; /* absolute instead of fixed */
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(0,0,0,0.7);
    z-index:2;
    display: flex;  /* Allow us to easily center the spinner */
    align-items: center; /* Vertical alignement */
    justify-content: center; /* Horizontal alignement */
}

/* Safari */
@-webkit-keyframes spin {
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#cover-div-spin::after {
    /* Removed all position rules */
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #c4040c;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    content:'';
    display:block;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4" style="background:orange;">
  <span><b>Example</b></span>
  <div align="center" class="embed-responsive embed-responsive-16by9">
     <div id="cover-div-spin"></div>
     <video class="embed-responsive-item" src="" controls muted></video>
  </div>
</div>