.spinner2 { position: fixed; width: 40px; height: 40px; top: calc(50% - 40px/2); left: calc(50% - 40px/2); .spinner-container { position: absolute; width: 100%; height: 100%; &.container2 { transform: rotateZ(45deg); } &.container3 { transform: rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } } .container1, .container2, .container3 { div { width: 6px; height: 6px; background-color: #fff; border-radius: 100%; position: absolute; animation: bouncedelay 1.2s infinite ease-in-out; animation-fill-mode: both; } } .container1 { .circle2 { animation-delay: -0.9s; } .circle3 { animation-delay: -0.6s; } .circle4 { animation-delay: -0.3s; } } .container2 { .circle1 { animation-delay: -1.1s; } .circle2 { animation-delay: -0.8s; } .circle3 { animation-delay: -0.5s; } .circle4 { animation-delay: -0.2s; } } .container3 { .circle1 { animation-delay: -1.0s; } .circle2 { animation-delay: -0.7s; } .circle3 { animation-delay: -0.4s; } .circle4 { animation-delay: -0.1s; } } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } }