diff options
author | Mark Otto <markdotto@gmail.com> | 2017-07-02 04:51:53 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2018-11-13 09:21:57 +0300 |
commit | 52a86cc67194bd170757b6b2059119f4f48abe1f (patch) | |
tree | 0a575dec34d6d163dc2aea7c0c624580b3f2b3b4 /scss | |
parent | f3bd8602dfbc5584b05c88782d2a833296daad01 (diff) |
Add Bootstrap's very first spinners omfg it's actually happening
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_spinners.scss | 69 | ||||
-rw-r--r-- | scss/_variables.scss | 11 | ||||
-rw-r--r-- | scss/bootstrap.scss | 1 |
3 files changed, 81 insertions, 0 deletions
diff --git a/scss/_spinners.scss b/scss/_spinners.scss new file mode 100644 index 0000000000..4235662b3f --- /dev/null +++ b/scss/_spinners.scss @@ -0,0 +1,69 @@ +// +// Rotating border +// + +@keyframes spinner-border { + to { transform: rotate(360deg); } +} + +.spinner-border { + position: relative; + display: inline-block; + width: $spinner-width; + height: $spinner-height; + overflow: hidden; + text-indent: -999em; + vertical-align: text-bottom; + border: $spinner-border-width solid; + border-color: currentColor transparent currentColor currentColor; + border-radius: 50%; + animation-name: spinner-border; + animation-duration: .75s; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +.spinner-border-sm { + width: $spinner-width-sm; + height: $spinner-height-sm; + border-width: $spinner-border-width-sm; +} + +// +// Growing circle +// + +@keyframes spinner-grow { + 0% { + opacity: 0; + transform: scale(0); + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + transform: scale(1); + } +} + +.spinner-grow { + position: relative; + display: inline-block; + width: $spinner-width; + height: $spinner-height; + overflow: hidden; + text-indent: -999em; + vertical-align: text-bottom; + background-color: currentColor; + border-radius: 50%; + animation-name: spinner-grow; + animation-duration: .75s; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +.spinner-grow-sm { + width: $spinner-width-sm; + height: $spinner-height-sm; +} diff --git a/scss/_variables.scss b/scss/_variables.scss index dac260c197..c636860bda 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1024,6 +1024,17 @@ $carousel-transition-duration: .6s !default; $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +// Spinners + +$spinner-width: 2rem !default; +$spinner-height: $spinner-width !default; +$spinner-border-width: .25em !default; + +$spinner-width-sm: 1rem !default; +$spinner-height-sm: $spinner-width-sm !default; +$spinner-border-width-sm: .2em !default; + + // Close $close-font-size: $font-size-base * 1.5 !default; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index e3f76546b2..6f7e4eef15 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -38,5 +38,6 @@ @import "tooltip"; @import "popover"; @import "carousel"; +@import "spinners"; @import "utilities"; @import "print"; |