]> git.r.bdr.sh - rbdr/dotfiles/blame - atom/packages/aesthetic-ui/styles/progress.less
Merge remote-tracking branch 'origin/master'
[rbdr/dotfiles] / atom / packages / aesthetic-ui / styles / progress.less
CommitLineData
06a3d686
BB
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
40progress {
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
55progress::-webkit-progress-bar {
56 background-color: transparent;
57}
58
59progress::-webkit-progress-value {
60 border-radius: @component-border-radius;
61 background-image: @progress-shine-gradient;
62 background-color: @background-color-info;
63}
64
65progress[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}