.bg{width: 100vw;height: 100vh; position:fixed;top:0;left:0;background-color: rgba(255,255,255,.75);z-index: 9999;}
.bg_loding{content:'';display: block;width: 100vw;height: 100vh; position: absolute;top:0;left:0; background-color: #f5f5f5;z-index: -1;}
.loding
{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:230px;
  height:230px;
  /* border:3px solid #3d3d3d; */
  border-radius:50%;
  text-align:center;
  line-height:150px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#0e386f;
  text-shadow:0 0 15px #0e386f;
  background: rgba(255,255,255,1.0);;
  box-shadow:0 0 20px rgba(0,0,0,.2);
}
.loding i{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);width:150px;;}
.loding:before
{
  content:'';
  display:block;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:3px solid transparent;
  border-top:3px solid #0e386f;
  border-left:3px solid transparent;
  border-right:3px solid #0e386f;
  border-radius:50%;
  animation:ani-cyle  2s linear infinite;
}
.loding span
{
  position:absolute;
  width:50%;
  height:4px;
  display:block;
  top:calc(50% - 2px);
  left:50%;
  background:none;
  animation:animate 2s linear infinite;
  transform-origin:left;
}
.loding span:after
{
  content:'';
  width:16px;
  height:16px;
  background:#0e386f;
  border-radius:50%;
  box-shadow: 0 0 10px #0e386f;
  position:absolute;
  right:-8px;
  top:calc(50% - 8px);
}

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

@keyframes animate
{
  0%{
    transform:rotate(45deg);
  }
  100%{
    transform:rotate(405deg);
  }
  
}


/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (max-width: 768px){





.loding{ width:200px; height:200px;}
  .loding i {width: 150px;}
}