:root {
  --color-primary: #cb0c9f;
  --color-secondary: #8392ab;
  --color-success: #82d616;
  --color-info: #17c1e8;
  --color-warning: #f53939;
  --color-danger: #ea0606;
  --color-light: #e9ecef;
  --color-dark: #252f40;
}


.cont-loader{
  position: fixed;
  z-index: 99999999999;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.dot-loader1 {
  width:100px;
  height:34px;
  background: 
    radial-gradient(circle closest-side,var(--color-info) 90%,#0000) 0%   50%,
    radial-gradient(circle closest-side,var(--color-info) 90%,#0000) 50%  50%,
    radial-gradient(circle closest-side,var(--color-info) 90%,#0000) 100% 50%;
  background-size:calc(100%/3) 12px;
  background-repeat: no-repeat;
  animation:d1 1s infinite linear;
}
@keyframes d1 {
    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%}
}

.dot-loader2 {
  width:12px;
  height:12px;
  background: #766DF4;
  border-radius: 50%;
  box-shadow: 20px 0 #766DF422,-20px 0 #766DF4;
  animation:d2 1s infinite linear alternate;
}
@keyframes d2 {
    0% {box-shadow: 20px 0 #766DF4,-20px 0 #766DF422;background: #766DF4}
    33%{box-shadow: 20px 0 #766DF4,-20px 0 #766DF422;background: #766DF422}
    66%{box-shadow: 20px 0 #766DF422,-20px 0 #766DF4;background: #766DF422}
}

.dot-loader3 {
  width:100px;
  height:12px;
  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) 100%;
  background-repeat: no-repeat;
  animation:d3 1s infinite linear;
}
@keyframes d3 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}

.spin-loader1 {
  width:50px;
  height:50px;
  border-radius:50%;
  background:conic-gradient(#0000 10%,var(--color-info));
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation:s1 1s infinite linear;
}
@keyframes s1 {to{transform: rotate(1turn)}}

.spin-loader2 {
  width:50px;
  height:50px;
  --c:radial-gradient(farthest-side,#766DF4 92%,#0000);
  background: 
    var(--c) 50% 0,
    var(--c) 50% 100%,
    var(--c) 100% 50%,
    var(--c) 0    50%;
  background-size:12px 12px;
  background-repeat:no-repeat;
  animation:s2 1s infinite;
}
@keyframes s2 {to{transform: rotate(.5turn)}}

.spin-loader3 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,#766DF4 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#766DF4);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation:s3 1s infinite linear;
}

@keyframes s3{ 
  100%{transform: rotate(1turn)}
}

.spin-loader4 {
  width: 50px;
  height: 50px;
  display: grid;
  border:4px solid #0000;
  border-radius: 50%;
  border-color:#E4E4ED #0000;
  animation: s4 1s infinite linear;
}
.spin-loader4::before,
.spin-loader4::after {    
  content:"";
  grid-area: 1/1;
  margin:2px;
  border:inherit;
  border-radius: 50%;
}
.spin-loader4::before {
  border-color:#766DF4 #0000;
  animation:inherit; 
  animation-duration: .5s;
  animation-direction: reverse;
}
.spin-loader4::after {
  margin:8px;
}

@keyframes s4 { 
  100%{transform: rotate(1turn)}
}

.spin-loader5 {
  --d:22px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  color: #766DF4;
  box-shadow: 
    calc(1*var(--d))      calc(0*var(--d))     0 0,
    calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1px,
    calc(0*var(--d))      calc(1*var(--d))     0 2px,
    calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
    calc(-1*var(--d))     calc(0*var(--d))     0 4px,
    calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
    calc(0*var(--d))      calc(-1*var(--d))    0 6px;
  animation: s5 1s infinite steps(8);
}

@keyframes s5 {
  100% {transform: rotate(1turn)}
}