responsivewebframework/src/less/throbber.less

Jalasoft Foundation Front End Framework ========================================

// Throbber

// animate variables
@throbber-animate-name: rotate;
@throbber-animate-slow-duration: 1000ms;
@throbber-animate-normal-duration: 650ms;
@throbber-animate-fast-duration: 400ms;
@throbber-animate-delay: 0;
@throbber-animate-iteration: infinite;
@throbber-animate-timing-function: linear;
@throbber-animate-direction: normal;

// throbber variables
@throbber-width: 24px;
@throbber-height: 24px;
@throbber-font-size: 24px;

.init-throbber {
  width: @throbber-width;
  height: @throbber-height;
  position: absolute;
  text-align: right;
  margin: auto;
  left: 0;
  right: 0;
  border-radius: 50%;
  z-index: 1;
}

//Throbber Component
div[class="throbber-slow"] {
  .init-throbber;
  .rotation-animation(@throbber-animate-name, @throbber-animate-slow-duration,
                       @throbber-animate-iteration, @throbber-animate-delay,
                       @throbber-animate-timing-function, @throbber-animate-direction);
}

div[class="throbber-normal"] {
  .init-throbber;
  .rotation-animation(@throbber-animate-name, @throbber-animate-normal-duration,
  @throbber-animate-iteration, @throbber-animate-delay,
  @throbber-animate-timing-function, @throbber-animate-direction);
}

div[class="throbber-fast"] {
  .init-throbber;
  .rotation-animation(@throbber-animate-name, @throbber-animate-fast-duration,
  @throbber-animate-iteration, @throbber-animate-delay,
  @throbber-animate-timing-function, @throbber-animate-direction);
}

div[class^="throbber"] > span[class="icon-throbber"] {
  font-size: @throbber-font-size;
  z-index: 2;
  color: @primary-color;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);

  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);

  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);

  }
  to {
    transform: rotate(360deg);
  }
}