.senna-loading-bar {
  background: #2aaae6;
  background: rgba(255, 255, 255, 0.5); }

.senna-loading .senna-loading-bar {
  -webkit-animation: shift-rightwards 1s ease-in-out infinite;
  animation: shift-rightwards 1s ease-in-out infinite;
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
  display: block; }

.senna-loading-bar {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  background: #2fa4f5;
  display: none;
  height: 2px;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000; }

@-webkit-keyframes shift-rightwards {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }

  40%,60% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); } }

@keyframes shift-rightwards {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }

  40%,60% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); } }

[class^="senna-transition-"] .flipped {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

.senna-transition-fade .flipped {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }