react-facebook-loading/dist/react-facebook-loading.css

The Facebook loading animation for React

/*! react-facebook-loading v0.6.2 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/cheton/react-facebook-loading */
.facebook-loading---loading---2f3Bf {
  display: block;
  width: 16px;
  height: 16px;
  -webkit-animation: facebook-loading---wait---lB7bO 0.8s steps(1, start) infinite;
  -moz-animation: facebook-loading---wait---lB7bO 0.8s steps(1, start) infinite;
  -o-animation: facebook-loading---wait---lB7bO 0.8s steps(1, start) infinite;
  -ms-animation: facebook-loading---wait---lB7bO 0.8s steps(1, start) infinite;
  animation: facebook-loading---wait---lB7bO 0.8s steps(1, start) infinite;
  background: -webkit-linear-gradient(90deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), -webkit-linear-gradient(0deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px), -webkit-linear-gradient(90deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), -webkit-linear-gradient(0deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px), -webkit-linear-gradient(90deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), -webkit-linear-gradient(0deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px), -webkit-linear-gradient(90deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), -webkit-linear-gradient(0deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px), -webkit-linear-gradient(90deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), -webkit-linear-gradient(0deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px), -webkit-linear-gradient(90deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), -webkit-linear-gradient(0deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
  background: -moz-linear-gradient(90deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), -moz-linear-gradient(0deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px), -moz-linear-gradient(90deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), -moz-linear-gradient(0deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px), -moz-linear-gradient(90deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), -moz-linear-gradient(0deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px), -moz-linear-gradient(90deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), -moz-linear-gradient(0deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px), -moz-linear-gradient(90deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), -moz-linear-gradient(0deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px), -moz-linear-gradient(90deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), -moz-linear-gradient(0deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
  background: -o-linear-gradient(90deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), -o-linear-gradient(0deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px), -o-linear-gradient(90deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), -o-linear-gradient(0deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px), -o-linear-gradient(90deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), -o-linear-gradient(0deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px), -o-linear-gradient(90deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), -o-linear-gradient(0deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px), -o-linear-gradient(90deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), -o-linear-gradient(0deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px), -o-linear-gradient(90deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), -o-linear-gradient(0deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
  background: -ms-linear-gradient(90deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), -ms-linear-gradient(0deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px), -ms-linear-gradient(90deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), -ms-linear-gradient(0deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px), -ms-linear-gradient(90deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), -ms-linear-gradient(0deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px), -ms-linear-gradient(90deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), -ms-linear-gradient(0deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px), -ms-linear-gradient(90deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), -ms-linear-gradient(0deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px), -ms-linear-gradient(90deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), -ms-linear-gradient(0deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
  background: linear-gradient(0deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), linear-gradient(90deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px), linear-gradient(0deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), linear-gradient(90deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px), linear-gradient(0deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), linear-gradient(90deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px), linear-gradient(0deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), linear-gradient(90deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px), linear-gradient(0deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), linear-gradient(90deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px), linear-gradient(0deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), linear-gradient(90deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
  background-repeat: no-repeat;
  -webkit-background-size: 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 11px, 4px 11px, 4px 16px, 4px 16px, 4px 16px, 4px 16px;
  -moz-background-size: 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 11px, 4px 11px, 4px 16px, 4px 16px, 4px 16px, 4px 16px;
  background-size: 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 9px, 4px 11px, 4px 11px, 4px 16px, 4px 16px, 4px 16px, 4px 16px;
  background-position: -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 3px, -4px 2px, -4px 2px, -4px 0, -4px 0, -4px 0, -4px 0;
}
@-moz-keyframes facebook-loading---wait---lB7bO {
  12.5% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0;
  }
  25% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px;
  }
  37.5% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px;
  }
  50% {
    background-position: -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px;
  }
  62.5% {
    background-position: -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px;
  }
  75% {
    background-position: 0, 0, 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
  87.5% {
    background-position: 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
  100% {
    background-position: 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
}
@-webkit-keyframes facebook-loading---wait---lB7bO {
  12.5% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0;
  }
  25% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px;
  }
  37.5% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px;
  }
  50% {
    background-position: -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px;
  }
  62.5% {
    background-position: -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px;
  }
  75% {
    background-position: 0, 0, 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
  87.5% {
    background-position: 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
  100% {
    background-position: 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
}
@-o-keyframes facebook-loading---wait---lB7bO {
  12.5% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0;
  }
  25% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px;
  }
  37.5% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px;
  }
  50% {
    background-position: -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px;
  }
  62.5% {
    background-position: -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px;
  }
  75% {
    background-position: 0, 0, 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
  87.5% {
    background-position: 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
  100% {
    background-position: 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
}
@keyframes facebook-loading---wait---lB7bO {
  12.5% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0;
  }
  25% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px;
  }
  37.5% {
    background-position: -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px;
  }
  50% {
    background-position: -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px;
  }
  62.5% {
    background-position: -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px;
  }
  75% {
    background-position: 0, 0, 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
  87.5% {
    background-position: 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
  100% {
    background-position: 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px;
  }
}

/*# sourceMappingURL=react-facebook-loading.css.map*/