.loader__box {
  display: grid;
  place-content: center;
  margin-top: 2rem;
}

.jelly {
  --uib-size: 50px;
  --uib-speed: 0.9s;
  --uib-color: #6a6a6a;

  position: relative;
  height: calc(var(--uib-size) / 2);
  width: var(--uib-size);
  filter: url("#uib-jelly-ooze");
  animation: rotate calc(var(--uib-speed) * 2) linear infinite;
}

.jelly::before,
.jelly::after {
  content: "";
  position: absolute;
  top: 0%;
  left: 25%;
  width: 50%;
  height: 100%;
  background: var(--uib-color);
  border-radius: 100%;
}

.jelly::before {
  animation: shift-left var(--uib-speed) ease infinite;
}

.jelly::after {
  animation: shift-right var(--uib-speed) ease infinite;
}

.jelly-maker {
  width: 0;
  height: 0;
  position: absolute;
}

@keyframes rotate {
  0%,
  49.999%,
  100% {
    transform: none;
  }

  50%,
  99.999% {
    transform: rotate(90deg);
  }
}

@keyframes shift-left {
  0%,
  100% {
    transform: translateX(0%);
  }
  50% {
    transform: scale(0.65) translateX(-75%);
  }
}

@keyframes shift-right {
  0%,
  100% {
    transform: translateX(0%);
  }
  50% {
    transform: scale(0.65) translateX(75%);
  }
}