File Content: _loader.scss .loader { position: relative; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); top: 0; z-index: 5; visibility: hidden; &.loading { visibility: visible; } .circle { position: absolute; left:0; margin: auto; width: 14px; height: 14px; @include border-radius(50%); border: 5px solid #ccc; &:before { content: ""; width: 7px; height: 7px; @include border-radius(20px); background: green; position: absolute; top:0;bottom:0; left:0; right:0; margin: auto; @include animation(circle 1.4s linear infinite); } } } @-webkit-keyframes circle { from { @include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)")); } to { @include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)")); } } @-moz-keyframes circle { from { @include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)")); } to { @include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)")); } } @-o-keyframes circle { from { @include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)")); } to { @include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)")); } } @keyframes circle { from { @include transform(unquote("rotate(0deg) translate(-9px) rotate(0deg)")); } to { @include transform(unquote("rotate(360deg) translate(-9px) rotate(-360deg)")); } } @-webkit-keyframes fade-in-out { from { @include opacity(0); } to { @include opacity(1); } } @-moz-keyframes fade-in-out { from { @include opacity(0); } to { @include opacity(1); } } @-o-keyframes fade-in-out { from { @include opacity(0); } to { @include opacity(1); } } @keyframes fade-in-out { from { @include opacity(0); } to { @include opacity(1); } } Submit