Add Bootstrap's very first spinners omfg it's actually happening

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";