.loading-mask { position: fixed; background: rgba(0,0,0,.1); top: 0; bottom: 0; right: 0; left: 0; @-webkit-keyframes scale { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 45% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0.7; } 80% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes scale { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 45% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0.7; } 80% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .loading { position: absolute; width: 60px; height: 20px; top: 50%; left: 50%; margin-top: -10px; margin-left: -30px; > div { display: inline-block; background: #fff; width: 15px; height: 15px; @include border-radius(100%); margin: 2px; $init: 0.12; @for $i from 1 through 3 { &:nth-child(#{$i}) { -webkit-animation: scale .75s #{$init}s infinite cubic-bezier(.2,.68,.18,1.08); animation: scale .75s #{$init}s infinite cubic-bezier(.2,.68,.18,1.08); } $init: ($i + 1) * 0.12; } } } }