.loader {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 5rem;
  height: 5rem;
  border: 5px solid #f2f2f2;
  border-radius: 50%;
  overflow: hidden;
  transition: 0.3s;
  animation: spinaround 1s linear infinite;
  box-sizing: border-box;
}
.success {
  background: #5ae4a7;
  border: 0;
}
.error {
  background: #fa3f32cb;
  border: 0;
}
.loader.success{
  &::before {
    height: 7px;
    width: 2.5rem;
    position: absolute;
    top: 65%;
    left: 41%;
    background-color: #f2f2f2;
    transform: rotate(-45deg);
    transform-origin: 0% 50%;
    border-radius: 5px;
    animation: baseGrow 1s;
    content: '';
  }
  
  &::after {
    height: 7px;
    width: 1.5rem;
    position: absolute;
    top: 65%;
    left: 47%;
    background-color: #f2f2f2;
    transform: rotate(-135deg);
    transform-origin: 0% 50%;
    border-radius: 5px;
    animation: tipGrow 1s;
    content:'';
  }  
}
.loader.error {
   &::before {
    width: 3rem;
    height: 0.5rem;
    background: #f2f2f2;
    transform-origin: 50% 50%;
    top: calc(50% - 0.25rem);
    left: calc(50% - 1.5rem);
    transform: rotate(45deg);
    position: absolute;
    content: '';
    border-radius: 10px;
    animation: leftIn 0.3s linear;
    content: '';
  }
  
  &::after {
     width: 3rem;
    height: 0.5rem;
    background: #f2f2f2;
    transform-origin: 50% 50%;
    top: calc(50% - 0.25rem);
    right: calc(50% - 1.5rem);
    transform: rotate(-45deg);
    position: absolute;
    content: '';
    border-radius: 10px;
    animation: rightIn 0.3s linear;
    content:'';
  } 
}
.loader.success, .loader.error {
  animation: pop 1.2s ease-in-out;
}

@keyframes spinaround {
  0% {
    transform: rotate(0deg);
        border-top: 5px solid var(--color-primary);
  }
  100% {
    transform: rotate(360deg);
        border-top: 5px solid var(--color-primary);

  }
}

@keyframes tipGrow {
  0% {
    width: 0px;
    left: 0;
    top: 0;
  }
  25% {
    width: 0px;
    left: 0;
    top: 0; 
  }
  50% {
    top: 0%;
    left: 0%;
    width: 0;
  }
  75% {
    top: 0%;
    left: 0%;
    width: 0rem;
  }
  100% {
    top: 65%;
    left: 50%;
    width: 1.5rem;
  }
}

@keyframes baseGrow {
  0% {

    width: 0;
  }
  90% {
    width: 0;
  }
  100% {

    width: 2.5rem;
  }
}

@keyframes pop {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1);    
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes leftIn {
  0% {
    left: 0;
    top: 0;
    width: 0;
  }
  100% {
    top: calc(50% - 0.25rem);
    left: calc(50% - 1.5rem);
    width: 3rem;
  }
}

@keyframes rightIn {
  0% {
    right: 0;
    top: 0;
    width: 0;
  }
  100% {
    top: calc(50% - 0.25rem);
    right: calc(50% - 1.5rem);
    width: 3rem;
  }
}