@keyframes loadingScale { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(0.1); opacity: 0.7; } 80% { transform: scale(1); opacity: 1; } } .width750 { .loading { margin-top: -23px; margin-left: -70px; width: 140px; height: 47px; > div { margin: 5px; width: 35px; height: 35px; } } } .loading-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 9; .loading { position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -60px; width: 120px; height: 40px; > div { $init: 0.12; @for $i from 1 to 3 { &:nth-child($i) { animation: loadingScale 0.75s $(init)s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } $init: calc(($i + 1) * 0.12); } display: inline-block; margin: 4px; width: 30px; height: 30px; border-radius: 100%; background: #fff; } } &.loading-mask-opactiy { background: transparent; .loading > div {background-color: #444;} } }