<div class="t-loading">
  <div class="t-spinner">
    <div class="t-layer animated" data-attr="first">
      <div class="rot0">
        <i class="pale"></i>
        <i class="pale"></i>
        <i class="pale"></i>
        <i class="pale"></i>
      </div>
      <div class="rot45">
        <i class="pale"></i>
        <i class="pale"></i>
        <i class="pale"></i>
        <i class="pale"></i>
      </div>
    </div>
    <div class="t-layer animated-inverse" data-attr="second">
      <div class="rot0">
        <i class="pale"></i>
        <i class="pale"></i>
        <i class="pale"></i>
        <i class="pale"></i>
      </div>
      <div class="rot45">
        <i class="pale"></i>
        <i class="pale"></i>
        <i class="pale"></i>
        <i class="pale"></i>
      </div>
    </div>
  </div>
</div>

html, body {
    height : 100%;
    width  : 100%;
}

.t-loading {
    position : absolute;
    top      : 0;
    right    : 0;
    bottom   : 0;
    left     : 0;
    background-color : rgba(0, 0, 0, .3);
}

.t-spinner {
    width    : 12em;
    height   : 12em;
    position : absolute;
    top      : 50%;
    left     : 50%;

    -webkit-transform : translate(-50%, -50%);
    transform         : translate(-50%, -50%);

}

.t-layer {
    position : relative;
}

.pale {
    display : block;
    position : absolute;
    width : 3em;
    height : 6em;
    border-radius : 1.5em;
    background-color : rgba(0, 0, 0, .3);
}

.rot0 .pale:nth-child(1) {
    background-color : rgba(155, 89, 182, .7);
    -webkit-transform : translate(4.5em, -.5em) rotate(0deg);
}

.rot0 .pale:nth-child(2) {

    background-color : rgba(230, 126, 34, .7);
    -webkit-transform : translate(8em, 3em) rotate(90deg);
}

.rot0 .pale:nth-child(3) {
    background-color : rgba(46, 204, 113, .7);
    -webkit-transform : translate(4.5em, 6.5em) rotate(0deg);
}

.rot0 .pale:nth-child(4) {
    background-color : rgba(52, 152, 219, .7);
    -webkit-transform : translate(1em, 3em) rotate(90deg);
}

.rot45 {
    -webkit-transform : rotate(45deg);
    -webkit-transform-origin : 6em 6em;
}

.rot45 .pale:nth-child(1) {
    background-color : rgba(231, 76, 60, .7);
    -webkit-transform : translate(4.5em, -.5em) rotate(0deg);
}

.rot45 .pale:nth-child(2) {
    background-color : rgba(241, 196, 15, .7);
    -webkit-transform : translate(8em, 3em) rotate(90deg);
}

.rot45 .pale:nth-child(3) {
    background-color : rgba(26, 188, 156, .7);
    -webkit-transform : translate(4.5em, 6.5em) rotate(0deg);
}

.rot45 .pale:nth-child(4) {
    background-color : rgba(169, 96, 142, .7);
    -webkit-transform : translate(1em, 3em) rotate(90deg);
}

.animated {
    animation : rot 3s linear infinite;
    transform-origin : 50% 50%;
    -webkit-transform-origin : 6em 6em;
    -webkit-animation : rot 3s linear infinite;
}

.animated-inverse {
    animation : rot 3s linear infinite reverse;
    transform-origin : 50% 50%;
    -webkit-transform-origin : 6em 6em;
    -webkit-animation : rot 3s linear infinite reverse;
}

@keyframes rot {
    0%   { transform : rotate(0); }
    100% { transform : rotate(360deg); }
}

@-webkit-keyframes rot {
    0%   { -webkit-transform : rotate(0); }
    100% { -webkit-transform : rotate(360deg); }
}

/** A simpler solution to a pen I've seen today; the original idea belongs to @LukyVj; you can find it here https://codepen.io/LukyVj/pen/wndIx
*/