.circle_loader {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 8px solid #2d80e7;
  animation:
    s10-1 0.8s infinite linear alternate,
    s10-2 1.6s infinite linear;
}
@keyframes s10-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes s10-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}
/* loader circle  */
.custom-loader-rond {
  width:50px;
  height:24px;
  background: 
    radial-gradient(circle closest-side,#766DF4 90%,#0000) 0%   50%,
    radial-gradient(circle closest-side,#766DF4 90%,#0000) 50%  50%,
    radial-gradient(circle closest-side,#766DF4 90%,#0000) 100% 50%;
  background-size:calc(100%/3) 12px;
  background-repeat: no-repeat;
  animation:d3 1s infinite linear;
}
@keyframes d3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}




.continuous_loader {
  /* width: 120px; */
  height:5px;
  background: 
    linear-gradient(90deg,#0001 33%,#0005 50%,#0001 66%)
    #89BEF4;
  background-size:300% 100%;
  animation: ct1 1s infinite linear;
}

@keyframes ct1 {
  0% {background-position: right}
}

.progress_loader {
  width:120px;
  height:20px;
  background:
   linear-gradient(#fff 0 0) left/0% 100% no-repeat
   #E4E4ED;
  animation:p1x 2s infinite linear;
}
@keyframes p1x {
    100% {background-size:100% 100%}
}



.custom-loader {
    height:4px;
    width:100%;
    display: none;
    background:
     linear-gradient(#3da0b4 0 0),
     linear-gradient(#3da0b4 0 0),
     #b7f1fc;
   background-size: 60% 100%;
   background-repeat: no-repeat;
   animation: p6 3s infinite;
 }
 
 @keyframes p6 {
   0%   {background-position:-150% 0,-150% 0}
   66%  {background-position: 250% 0,-150% 0}
   100% {background-position: 250% 0, 250% 0}
 }