.spinner { height: 10px; @include flex-center; justify-content: center; div { width: 10px; height: 10px; background-color: rgba(0,0,0,0.35); border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; margin-right: $hmargin/2; &:last-child{ margin-right: 0; } } &.white div{ background-color: rgba(255,255,255,0.55); } .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } }