// Spinner

.loading-spinner(@size) {
  width: @size;
  height: @size;
  display: block;

  background-image: url(images/octocat-spinner-128.gif);
  background-repeat: no-repeat;
  background-size: cover;

  &.inline-block {
    display: inline-block;
  }
}

.loading-spinner-large {
  .loading-spinner(64px);
}

.loading-spinner-medium {
  .loading-spinner(50px);
}

.loading-spinner-small {
  .loading-spinner(32px);
}

.loading-spinner-tiny {
  .loading-spinner(20px);
}


// Progress Bar

// Much learning from:
// http://css-tricks.com/html5-progress-element/

@progress-height: 8px;
@progress-buffer-color: fade(@progress-background-color, 20%);

progress {
  -webkit-appearance: none;
  height: @progress-height;
  border-radius: @component-border-radius;

  background-color: @input-background-color;
  box-shadow: inset 0 0 0 1px @input-border-color;

  background-image:
     linear-gradient(-45deg, transparent 33%, @progress-buffer-color 33%,
                             @progress-buffer-color 66%, transparent 66%);
  background-size: 25px @progress-height, 100% 100%, 100% 100%;
  -webkit-animation: animate-stripes 5s linear infinite;
}

progress::-webkit-progress-bar {
  background-color: transparent;
}

progress::-webkit-progress-value {
  border-radius: @component-border-radius;
  background-color: @progress-background-color;
}

progress[value] {
  background-image: none;
  -webkit-animation: none;
}

@-webkit-keyframes animate-stripes {
   100% { background-position: -100px 0px; }
}
