@keyframes loader {
0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
} @keyframes fb-loader {
0% { top: 6px; height: 25px; } 50%, 100% { top: 10px; height: 12px; }
}
.loader {
margin: 50px auto; color: transparent; @include size(20px); &.loader-sm { @include size(14px); } &.loader-lg { @include size(30px); } border-radius: 50%; background: #fff; background: linear-gradient(to right, rgba(135, 146, 162, 1) 10%, rgba(135, 146, 162, 0) 42%); position: relative; animation: loader .8s infinite linear; transform: translateZ(0);
} .loader:before {
@include size(50%); background: rgba(135, 146, 162, 1); border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: '';
} .loader:after {
background-color: #f7f8f9; @include size(75%); border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
} .ring-loader-wrap {
position: relative;
} .ring-loader {
position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; @include size($ring-loader-size-md);
} .ring-loader div {
box-sizing: border-box; display: block; position: absolute; @include size($ring-loader-size-md); margin: 0; border: 2px solid #fff; border-radius: 50%; animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #fff transparent transparent transparent;
} .ring-loader div:nth-child(1) {
animation-delay: -0.45s;
} .ring-loader div:nth-child(2) {
animation-delay: -0.3s;
} .ring-loader div:nth-child(3) {
animation-delay: -0.15s;
}
.fb-loader {
display: inline-block; position: relative; @include size(32px);
}
.fb-loader div {
display: inline-block; position: absolute; left: 0; width: 4px; background: $bg-primary-ex; animation: fb-loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
} .fb-loader div:nth-child(1) {
left: 6px; animation-delay: -0.24s;
} .fb-loader div:nth-child(2) {
left: 14px; animation-delay: -0.12s;
} .fb-loader div:nth-child(3) {
left: 22px; animation-delay: 0;
}