diff --git a/index.less b/index.less index 4b6ec76..a496028 100644 --- a/index.less +++ b/index.less @@ -3,7 +3,7 @@ @import 'stylesheets/text'; @import 'stylesheets/git'; @import 'stylesheets/sites'; -@import 'stylesheets/loading'; +@import 'stylesheets/progress'; @import 'stylesheets/buttons'; @import 'stylesheets/panels'; @import 'stylesheets/panes'; diff --git a/stylesheets/loading.less b/stylesheets/loading.less deleted file mode 100644 index af93c42..0000000 --- a/stylesheets/loading.less +++ /dev/null @@ -1,28 +0,0 @@ -@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-medium { - .loading-spinner(64px); -} - -.loading-spinner-small { - .loading-spinner(32px); -} - -.loading-spinner-tiny { - .loading-spinner(16px); -} diff --git a/stylesheets/progress.less b/stylesheets/progress.less new file mode 100644 index 0000000..38a60d1 --- /dev/null +++ b/stylesheets/progress.less @@ -0,0 +1,76 @@ +@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; +} + +progress::-webkit-progress-bar { + height: @progress-height; + border-radius: @component-border-radius; + + background-color: #666; + + 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 infinite; + animation: animate-stripes 5s linear infinite; +} + +progress::-webkit-progress-value { + border-radius: @component-border-radius; + background-image: @progress-shine-gradient; + background-color: @background-color-success; +} + +progress[value]::-webkit-progress-bar { + background-image: @progress-shine-gradient; + animation: none; +} + +@-webkit-keyframes animate-stripes { + 100% { background-position: 100px 0px; } +}