.api_loader{
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  top:6%;
  left:50%;
  margin-left:-30px;
  z-index:101;
  width:60px;
  height:60px;
  background:#fff;
  -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
  -webkit-box-shadow:rgba(0, 0, 0, 0.15) 0 8px 30px;-moz-box-shadow:rgba(0, 0, 0, 0.15) 0 8px 30px;box-shadow:rgba(0, 0, 0, 0.15) 0 8px 30px;
}
.api_loader svg{
  position:relative;
  width:32px;
  height:32px;
  animation:2s linear 0s infinite normal none running rotate;
}
.api_loader svg .path{
  stroke-width:4px;
  stroke:var(--bs-red);
  stroke-linecap:round;
  animation:1.5s ease-in-out 0s infinite normal none running dash;
}
@keyframes rotate{
  0%{
    -webkit-transform:rotate(0);
    transform:rotate(0)
  }
  100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@keyframes dash{
  0%{
    stroke-dasharray:1, 150;
    stroke-dashoffset:0;
  }
  50%{
    stroke-dasharray:90, 150;
    stroke-dashoffset:-35;
  }
  100%{
    stroke-dasharray:90, 150;
    stroke-dashoffset:-124;
  }
}