Sindbad~EG File Manager

//   _                 _           
//  | |               | |          
//  | | ___   __ _  __| | ___ _ __ 
//  | |/ _ \ / _` |/ _` |/ _ \ '__|
//  | | (_) | (_| | (_| |  __/ |   
//  |_|\___/ \__,_|\__,_|\___|_|   
//                                

.ps-loader {}

.ps-loader--ellipsis {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 64px;
  height: 64px;

  > span {
    position: absolute;
    top: 27px;
    width: 11px;
    height: 11px;
    display: block;
    border-radius: 50%;
    background: $scss-loader-color;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);

    &:nth-child(1) {
      left: 6px;
      animation: ps-loader-ellipsis1 0.6s infinite;
    }

    &:nth-child(2) {
      left: 6px;
      animation: ps-loader-ellipsis2 0.6s infinite;
    }

    &:nth-child(3) {
      left: 26px;
      animation: ps-loader-ellipsis2 0.6s infinite;
    }

    &:nth-child(4) {
      left: 45px;
      animation: ps-loader-ellipsis3 0.6s infinite;
    }
  }
}

@keyframes ps-loader-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ps-loader-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes ps-loader-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}