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);
+}