.cr-dots-loader {
  display: flex;
  height: 10px;

  &--dot {
    opacity: 0.5;
    position: relative;
    width: 10px;
    height: 10px;

    &:nth-child(2) {
      &:before {
        animation-delay: 0.5s;
      }
      margin-left: 5px;
      margin-right: 5px;
    }
    &:nth-child(3) {
      &:before {
        animation-delay: 1s;
      }
    }

    &:before {
      content: "";
      display: inline-block;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      animation-fill-mode: both;
      animation: dynamic 1.8s infinite ease-in-out;
      background: #e6eaed;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      position: absolute;
    }

    @keyframes dynamic {
      0%,
      80%,
      100% {
        width: 10px;
        height: 10px;
      }
      40% {
        width: 6px;
        height: 6px;
      }
    }
  }

  &--dark {
    &:before {
      background: #9e9c9c;
    }
  }
}