Misago/emberapp/app/styles/misago/loaders.less

//
// Misago Spinners
// --------------------------------------------------


// Big spinner used for transitions
.misago-loader {
  // CSS Spinner (c) Luke Haas (MIT Licensed)
  // http://lukehaas.me
  // https://github.com/lukehaas/css-loaders
  font-size: 11px;
  text-indent: -99999em;
  margin: @line-height-computed * 2 auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em @loader-color;

  &, &:before, &:after {
    border-radius: 50%;
  }

  &:before, &:after {
    position: absolute;
    content: '';
  }

  &:before {
    width: 5.2em;
    height: 10.2em;
    background: @body-bg;
    border-radius: 10.2em 0 0 10.2em;
    top: -0.1em;
    left: -0.1em;
    -webkit-transform-origin: 5.2em 5.1em;
    transform-origin: 5.2em 5.1em;
    -webkit-animation: load2 2s infinite ease 1.5s;
    animation: load2 2s infinite ease 1.5s;
  }

  &:after {
    width: 5.2em;
    height: 10.2em;
    background: @body-bg;
    border-radius: 0 10.2em 10.2em 0;
    top: -0.1em;
    left: 5.1em;
    -webkit-transform-origin: 0px 5.1em;
    transform-origin: 0px 5.1em;
    -webkit-animation: load2 2s infinite ease;
    animation: load2 2s infinite ease;
  }

  @-webkit-keyframes load2 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes load2 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}


// Loader message
.loading {
  .loader-message {
    color: @loader-color;
    font-size: @font-size-large;
    text-align: center;
  }
}

// Transmission Bars
.loader-compact {
  margin: 0px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;

  &>div {
    background-color: @loader-compact-color;
    height: 100%;
    width: 6px;
    display: inline-block;

    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
  }

  .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }

  .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }

  .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }

  .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


// Loading overlay used for images
.loading-overlay {
  position: absolute; // needs to be positioned inside relative

  top: 0px;
  left: 0px;

  display: table;
  background-color: @loading-overlay-bg;

  &>.overlay-icon {
    display: table-cell;
    vertical-align: middle;

    text-align: center;

    .loader-compact>div{
      background-color: @loading-overlay-color;
    }
  }
}