@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;

}