.spinner { -webkit-animation: sk-rotate 2.0s infinite linear; animation: sk-rotate 2.0s infinite linear; height: 4em; margin: 0 auto; position: relative; text-align: center; width: 4em; &.orange { .dot1, .dot2 { background-color: $orange; } } &.fucsia { .dot1, .dot2 { background-color: $fucsia; } } &.blue { .dot1, .dot2 { background-color: $blue; } } &.turquoise { .dot1, .dot2 { background-color: $turquoise; } } &__text { margin-top: 1.5em; text-align: center; } } .dot1, .dot2 { -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; border-radius: 100%; display: inline-block; height: 60%; position: absolute; top: 0; width: 60%; } .dot2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; bottom: 0; top: auto; } @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }} @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } }