diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-06-14 12:39:13 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-06-14 12:45:43 +0100 |
commit | e2cb441579a1fe8d8c4efde37e27dfe4fbf97474 (patch) | |
tree | 71591f6b6cdfb576f532f186ae84ff62b87c4417 | |
parent | fbfddd99d6a4846e807dc8c2dadd64d3d120fb23 (diff) | |
download | gitlab-ce-20084-loading-spinner.tar.gz |
Adds spinner scss20084-loading-spinner
-rw-r--r-- | app/assets/stylesheets/framework.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/spinner.scss | 57 |
2 files changed, 58 insertions, 0 deletions
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 9dc9f9a9068..3b52d9288e5 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -50,3 +50,4 @@ @import "framework/snippets.scss"; @import "framework/memory_graph.scss"; @import "framework/responsive-tables.scss"; +@import "framework/spinner.scss"; diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss new file mode 100644 index 00000000000..f81abeb77dd --- /dev/null +++ b/app/assets/stylesheets/framework/spinner.scss @@ -0,0 +1,57 @@ +@mixin spinner-color($color) { + border-color: rgba($color, .25); + border-top-color: $color; +} + +@mixin spinner($size, $animation-duration, $border-width) { + width: $size; + height: $size; + border-radius: 50%; + position: relative; + margin: 0 auto; + animation-name: spinner-rotate; + animation-duration: $animation-duration; + animation-timing-function: linear; + animation-iteration-count: infinite; + border-style: solid; + border-width: $border-width; + display: block; +} + +@keyframes spinner-rotate { + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(360deg); + } +} +.spinner-sm, +.spinner-md, +.spinner-lg { + + &.black { + @include spinner-color($black); + } + + &.orange { + @include spinner-color($orange-600); + } + + &.white { + @include spinner-color($white-light); + } +} + +.spinner-sm { + @include spinner(15px, 1s, 2px); +} + +.spinner-md { + @include spinner(30px, 1.5s, 4px); +} + +.spinner-lg { + @include spinner(60px, 2.25s, 4px); +} |