@import "variables";

// Loaders

.load {
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: loading;
  -webkit-animation-timing-function: linear;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-name: loading;
  -moz-animation-timing-function: linear;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: loading;
  animation-timing-function: linear;
  border-radius: $round;
  border: ($border-width * 3) solid #DDD;
  border-left-color: #666;
  display: inline-block;
  height: 2em;
  width: 2em;

  &.smallest {
    width: $loader-smallest;
    height: $loader-smallest;
    border-width: $border-width;
  }

  &.small {
    width: $loader-small;
    height: $loader-small;
    border-width: $border-width * 2;
  }

  &.large {
    width: $loader-large;
    height: $loader-large;
    border-width: $border-width * 4;
  }
}

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

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

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

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

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

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