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