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

#cover-div-spin::after {
  left:50%;
  top:50%;
  transform:translate(-50%, 50%);
}

you have to just add this 3 line in #cover-div-spin::after otherwise all code lines are perfect.

when we move any element 50% top and left we have to minus the element -50% which ever the side we use.

if we want to align vertically center then it will be like top:50%; trasnfrom:translateY(-50%); and if we need to center horizontally then left:50%; trasnfrom:translateX(-50%); and if we need to center both horizontal and vertical then you can use above code;

Answer 2

Something like the following example could help.

.col-md-4,
.embed-responsive {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-flow: column;
}
.col-md-4 span {
  height: 100%;
}
.col-md-4 {
  height: 12rem;
}
@-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 {
  background-color: transparent;
  z-index: 2;
  width: 8rem;
  height: 8rem;
  position: absolute;
}
#cover-div-spin::after {
  border: 1rem solid #f3f3f3;
  border-radius: 50%;
  border-top: 1rem solid #c4040c;
  width: 6rem;
  height: 6rem;
  align-self: center;
  content: '';
  display: inline-flex;
  -webkit-animation: spin .8s linear infinite;
  animation: spin .8s linear infinite;
}
.embed-responsive-item {
  z-index: 1;
  top: 2rem;
  position: absolute;
}

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

Answer 3

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>

Answer 4

to be exact center, the left and top cannot be full 50%, but, 50% - half the width of the spinner (on your case the spinner is 100px, so half is 50px), like this (i just change the left & top, and remove duplicate left and top at the bottom)

#cover-div-spin::after {
    /*position: fixed;*/
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    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%; remove this */
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

and if you want to make the spinner only on the div, just change the position on #cover-div-spin to absolute, like this

#cover-div-spin {
  position:absolute;
}