@talentsoft-opensource/hylia/atoms/loader-dot.less

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

.loader-dots {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .loader-dot {
    margin: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: @smart;
    transform: scale(0.5);
    animation: scale-dot 1.2s ease-out infinite;
  
    &:nth-of-type(2) {
      animation-delay: 0.2s;
    }
    &:nth-of-type(3) {
      animation-delay: 0.3s;
    }
    &:nth-of-type(4) {
      animation-delay: 0.4s;
    }
    &:nth-of-type(5) {
      animation-delay: 0.5s;
    }
  }
  
  @keyframes scale-dot {
    0% {
      transform: scale(0.5);
    }
    25% {
      transform: scale(1);
    }
    75% {
      transform: scale(0.5);
    }
    100% {
      transform: scale(0.5);
    }
  }