JSFiddle - React, Tailwind, and code Playground

by JorgePalaciosZaratiegui

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<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>

CSS

#cover-div-spin {
    position:absolute;
    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 */
    /*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;*/
    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;
}