@import url('/assets/css/main.css');

/* HTML: <div class="loader"></div> */
.loader.loader-infinite-arrow-line {
  width: calc(80px / cos(45deg));
  height: 1.25rem;
  --c: hsla(var(--basic-h-pri),var(--basic-s-pri),var(--basic-l-pri)) 0 15px, transparent 0 30px;
  background: 
    repeating-linear-gradient( 45deg,var(--c)) right top,
    repeating-linear-gradient(135deg,var(--c)) right bottom;
  background-size:  200% 50%;
  background-repeat: no-repeat;
  border-radius: 13px;
  animation: lial 2s infinite linear;
}
@keyframes lial {
    100% {background-position:top left,bottom left}
}

/* HTML: <div class="loader"></div> */
.loader.loader-infinite-curve-line {
  width: 90px;
  height: 18px;
  color: hsla(var(--basic-h-pri),var(--basic-s-pri),var(--basic-l-pri),0.75);
  background: 
    radial-gradient(circle 12px at left 7px top 50%, transparent 92%, currentColor),
    radial-gradient(circle 12px at left 0   top 50%, currentColor 92%, transparent);
  background-size: calc(100%/5) 100%; 
  background-position: 20% 0%;
  border-radius: 13px;
  animation: licl 2.5s infinite linear;
}
@keyframes licl {
    100% {background-position: 0% 0%}
}

/* HTML: <div class="loader"></div> */
.loader.loader-factory-balls {
  width: 90px;
  height: 1.5rem;
  display: grid;
}
.loader.loader-factory-balls:before,
.loader.loader-factory-balls:after{
  content: "";
  grid-area: 2/1;
  --t: 0.35;
  --c: hsla(var(--basic-h-pri),var(--basic-s-sec),var(--basic-l-pri),var(--t));
  background: radial-gradient(circle closest-side, var(--c) 92%,#0000 ) 0 0/calc(100%/4) 100%;
  clip-path: inset(0 50% 0 0);
  animation: lfb 1s infinite linear;
}
.loader.loader-factory-balls:after{
  --t: 0.85;
  clip-path: inset(0 0 0 50%);
}
@keyframes lfb {
    100% {background-position: calc(100%/3) 0}
}

/* HTML: <div class="loader"></div> */
.loader.loader-color-transform {
  width: 90px;
  height: 1.5rem;
  margin-top: 5px;
  margin-bottom: 5px;
  --c1: hsl(var(--basic-h-pri),var(--basic-s-pri),var(--basic-l-pri));
  --c1: hsl(var(--basic-h-sec),var(--basic-s-pri),var(--basic-l-pri));
  /* box-shadow: 0 3px 0 #fff; */
  border-radius: 25%;
  display: grid;
}
.loader.loader-color-transform:before{
  content: "";
  grid-area: 1/1;
  background: radial-gradient(circle closest-side,var(--c2,#0ff) 92%,#0000) 0 0/calc(100%/4) 100%;
  animation: lct 1s infinite linear;
}
.loader.loader-color-transform:after{
  content: "";
  grid-area: 1/1;
  background: radial-gradient(circle closest-side,var(--c2,#f00) 92%,#0000) 0 0/calc(100%/4) 100%;
  animation: lct 1s infinite linear;
}
.loader.loader-color-transform:after{
  /* --c: rgba(0,0,0,0.25); */
  --c: hsla( var(--basic-h-sec), var(--basic-s-pri), var(--basic-l-pri), 0.5 );
  background-color: hsla( var(--basic-h-pri), var(--basic-s-pri), var(--basic-l-pri), 0.5 );
  /* box-shadow: 0 -1px 0 1px hsl( var(--basic-h-pri), var(--basic-s-pri), var(--basic-l-pri) ); */
  clip-path: inset(-2px calc(50% - 10px));
}
@keyframes lct {
    100% {background-position: calc(100%/3) 0}
}