.loader-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .loader { width: #{80 / $base-font-size }rem; height: #{80 / $base-font-size}rem; position: relative; } .loader__circle1, .loader__circle2 { width: 100%; height: 100%; border-radius: 80%; @include themify() { background-color: getThemifyVariable('logo-color'); } opacity: 0.6; position: absolute; top: 0; left: 0; animation: sk-bounce 2.0s infinite ease-in-out; } .loader__circle2 { animation-delay: -1.0s; } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); } 50% { transform: scale(1.0); } }