git.r.bdr.sh - rbdr/dotfiles/blob - atom/packages/aesthetic-ui/styles/progress.less

   1 @import "ui-variables";
   2 @import "ui-mixins";
   3
   4 .loading-spinner(@size) {
   5   width: @size;
   6   height: @size;
   7   display: block;
   8
   9   background-image: url(images/octocat-spinner-128.gif);
  10   background-repeat: no-repeat;
  11   background-size: cover;
  12
  13   &.inline-block {
  14     display: inline-block;
  15   }
  16 }
  17
  18 .loading-spinner-large {
  19   .loading-spinner(64px);
  20 }
  21
  22 .loading-spinner-medium {
  23   .loading-spinner(50px);
  24 }
  25
  26 .loading-spinner-small {
  27   .loading-spinner(32px);
  28 }
  29
  30 .loading-spinner-tiny {
  31   .loading-spinner(20px);
  32 }
  33
  34 // Much learning from:
  35 // http://css-tricks.com/html5-progress-element/
  36
  37 @progress-height: 16px;
  38 @progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15));
  39
  40 progress {
  41   height: @progress-height;
  42   -webkit-appearance: none;
  43   border-radius: @component-border-radius;
  44   background-color: #ccc;
  45   background-image:
  46      -webkit-linear-gradient(-30deg,
  47                              transparent 33%, rgba(0, 0, 0, .1) 33%,
  48                              rgba(0,0, 0, .1) 66%, transparent 66%),
  49                              @progress-shine-gradient;
  50   border-radius: 2px;
  51   background-size: 25px @progress-height, 100% 100%, 100% 100%;
  52   -webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage
  53 }
  54
  55 progress::-webkit-progress-bar {
  56   background-color: transparent;
  57 }
  58
  59 progress::-webkit-progress-value {
  60   border-radius: @component-border-radius;
  61   background-image: @progress-shine-gradient;
  62   background-color: @background-color-info;
  63 }
  64
  65 progress[value] {
  66   background-image: @progress-shine-gradient;
  67   -webkit-animation: none;
  68 }
  69
  70 @-webkit-keyframes animate-stripes {
  71    100% { background-position: 100px 0px; }
  72 }