SOURCE

<div id="loader-wrapper">
  <div id="loader">
    <div class = "left">
      <div class = "left-rect"></div>
      <div class = "left-cicle"></div>
    </div>
    <div class = "center">
      <div class = "center-first"></div>
      <div class = "center-second"></div>
      <div class = "center-third"></div>
    </div>
    <div class = "right">
      <div class = "right-rect"></div>
      <div class = "right-cicle"></div>
    </div>
  </div>
  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
</div>

#loader-wrapper {
  position: fixed;
  background-color: #000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:999999;
}
#loader {
  display: block;
  background:blue;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
/*   border-radius: 50%; */
  z-index:1001;
}
#loader:before {
  content: "";
  background:#fafafa;
  position: absolute;
  top: 0px;
  left: 25px;
  right: 25px;
  bottom: 0px;
  border-radius: 50%;
  /* transform: rotate(-30deg); */
  border: 1px solid red;
/*   animation: rotate 2s linear infinite; */
/*   z-index:10; */
}
#loader .right .right-rect {
  position: absolute;
  background:#FAFAFA;
  top: 75px;
  left: 75px;
  right: 0px;
  bottom: 0px;
/*   border: 1px solid red; */
}
#loader .right .right-cicle {
  position: absolute;
  background:blue;
  top: 60px;
  left: 125px;
  right: 0px;
  bottom: 60px;
  border-radius: 50%;
/*   border: 1px solid red; */
}
#loader .left .left-rect {
  position: absolute;
  background:#FAFAFA;
  top: 0px;
  left: 0px;
  right: 75px;
  bottom: 75px;
/*   border: 1px solid red; */
}
#loader .left .left-cicle {
  position: absolute;
  background:blue;
  top: 60px;
  left: 0px;
  right: 125px;
  bottom: 60px;
  border-radius: 50%;
/*   border: 1px solid red; */
}
#loader .center {
  background:#F4F4F4;
  position: absolute;
  top: 0px;
  left: 30px;
  right: 30px;
  bottom: 0px;
  border-radius: 50%;
  border: 1px solid red;
  z-index: 9;
}
#loader .center .center-first {
  background:#fff;
  position: absolute;
  top: 50px;
  left: 30px;
  right: 30px;
  bottom: 50px;
  border-radius: 20%;
  border-left: 5px solid blue;
  z-index: 9;
}
#loader .center .center-second {
  background:#fff;
  position: absolute;
  top: 50px;
  left: 30px;
  right: 30px;
  bottom: 75px;
  border-top-left-radius: 20%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border: 5px solid blue;
  z-index: 9;
}
#loader .center .center-third {
  background:#fff;
  position: absolute;
  top: 70px;
  left: 30px;
  right: 30px;
  bottom: 50px;
  border-top-right-radius: 80%;
  border: 5px solid blue;
  border-bottom-color: transparent;
  z-index: 9;
}
@keyframes rotate {
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}
@keyframes scale {
  0%{transform: scale(1,1);}
  25%{transform: scale(2,2);}
  50%{transform: scale(1,1);}
  70%{transform: scale(0.5,0.5);}
  100%{transform: scale(1,1);}
}