.submit__loader {
  position: absolute;
  display: flex;
  width: 25px;
  height: 25px;
  transform: scale(.20);
  transform-origin: center center;
}

@media (max-width: 300px) {
  .submit__loader {
      transform: scale(.15);
  }
}

.loader {
  position: absolute;
  width: 100%;
  height: 100%;;
  top: 50%;
  left: 50%;
  transform: translate(-200%, -200%);

  visibility: hidden;
  opacity: 0;
  transition: visibility, opacity .3s ease-in-out;
}

.submit__content {
  transition: visibility, opacity .3s ease-in-out;
  visibility: visible;
  opacity: 1;
}

.submit.processing {
  pointer-events: none;

}

.submit.processing .submit__content {
  visibility: hidden;
  opacity: 0;
}

.submit.processing .loader{
  visibility: visible;
  opacity: 1;
}

.loader__box {
  border: 8px solid var(--bg-color-primary);
  box-sizing: border-box;
  position: absolute;
  display: block;
  
}
.box1 {
  width: 112px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;
  animation: anime1 4s forwards ease-in-out infinite;
}
.box2 {
  width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;
  animation: anime2 4s forwards ease-in-out infinite;
}
.box3 {
  width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 64px;
  animation: anime3 4s forwards ease-in-out infinite;
}

      
@keyframes anime1{
0%
  {width: 112px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;}
12.5%
  {width: 48px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;}
25%
  {width: 48px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;}
37.5%
  {width: 48px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;}
50%
  {width: 48px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;}
62.5%
  {width: 48px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;}
75%
  {width: 48px;
  height: 112px;
  margin-top: 0px;
  margin-left: 0px;}
87.5%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;}
100%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;}
  
  }
@keyframes anime2{
0%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;}
12.5%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;}
25%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;}
37.5%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;}
50%
  {width: 112px;
  height: 48px;
  margin-top: 0px;
  margin-left: 0px;}
62.5%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 64px;}
75%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 64px;}
87.5%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 64px;}
100%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 64px;}
  }
@keyframes anime3{
0%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 64px;}
12.5%
  {width: 48px;
  height: 48px;
  margin-top: 0px;
  margin-left: 64px;}
25%
  {width: 48px;
  height: 112px;
  margin-top: 0px;
  margin-left: 64px;}
37.5%
  {width: 48px;
  height: 48px;
  margin-top: 64px;
  margin-left: 64px;}
50%
  {width: 48px;
  height: 48px;
  margin-top: 64px;
  margin-left: 64px;}
62.5%
  {width: 48px;
  height: 48px;
  margin-top: 64px;
  margin-left: 64px;}
75%
  {width: 48px;
  height: 48px;
  margin-top: 64px;
  margin-left: 64px;}
87.5%
  {width: 48px;
  height: 48px;
  margin-top: 64px;
  margin-left: 64px;}
100%
  {width: 112px;
  height: 48px;
  margin-top: 64px;
  margin-left: 0px;}
  }