Merge remote-tracking branch 'origin/master'

[rbdr/dotfiles] / atom / packages / aesthetic-ui / styles / progress.less

@import "ui-variables";
@import "ui-mixins";

.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);
}

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

@progress-height: 16px;
@progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15));

progress {
  height: @progress-height;
  -webkit-appearance: none;
  border-radius: @component-border-radius;
  background-color: #ccc;
  background-image:
     -webkit-linear-gradient(-30deg,
                             transparent 33%, rgba(0, 0, 0, .1) 33%,
                             rgba(0,0, 0, .1) 66%, transparent 66%),
                             @progress-shine-gradient;
  border-radius: 2px;
  background-size: 25px @progress-height, 100% 100%, 100% 100%;
  -webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage
}

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

progress::-webkit-progress-value {
  border-radius: @component-border-radius;
  background-image: @progress-shine-gradient;
  background-color: @background-color-info;
}

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

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