.onexp-loader {
  position: relative;
  width: 100px;
  height: 100px;
  animation: onexp-loader-rotate-anim 2.5s ease-in-out infinite normal;
}

.onexp-loader .ball-red {
  background-color: #fc4430;
  animation: onexp-loader-ball-red-anim 2.5s ease-in-out infinite alternate,
    onexp-loader-ball-radius-anim 2.5s ease-in-out infinite none;
}

.onexp-loader .ball-blue {
  background-color: #1700c7;
  animation: onexp-loader-ball-blue-anim 2.5s ease-in-out infinite alternate,
    onexp-loader-ball-radius-anim 2.5s ease-in-out infinite none;
}

.onexp-loader .ball-green {
  background-color: #00d3e4;
  animation: onexp-loader-ball-green-anim 2.5s ease-in-out infinite alternate,
    onexp-loader-ball-radius-anim 2.5s ease-in-out infinite none;
}

.onexp-loader .ball-yellow {
  background-color: #ffb700;
  animation: onexp-loader-ball-yellow-anim 2.5s ease-in-out infinite alternate,
    onexp-loader-ball-radius-anim 2.5s ease-in-out infinite none;
}

.onexp-loader .onexp-loader-ball {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes onexp-loader-rotate-anim {
  to {
    transform: rotateZ(1080deg);
  }
}

@keyframes onexp-loader-ball-radius-anim {
  50% {
    width: 20px;
    height: 20px;
    border-radius: 10px;
  }
}

@keyframes onexp-loader-ball-red-anim {
  50% {
    left: calc(50% + 26px);
  }
}

@keyframes onexp-loader-ball-blue-anim {
  50% {
    top: calc(50% + 26px);
  }
}

@keyframes onexp-loader-ball-green-anim {
  50% {
    left: calc(50% - 26px);
  }
}

@keyframes onexp-loader-ball-yellow-anim {
  50% {
    top: calc(50% - 26px);
  }
}