Merge branch '20084-update-the-spinner-component' into 'master'

Resolve "Update the spinner component"

Closes #20084

See merge request gitlab-org/gitlab-ce!25186

3 files changed, 57 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 555ea276c6c..216877a4461 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -66,3 +66,4 @@
 @import 'framework/read_more';
 @import 'framework/flex_grid';
 @import 'framework/system_messages';
+@import "framework/spinner";
diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss
new file mode 100644
index 00000000000..584f10afc49
--- /dev/null
+++ b/app/assets/stylesheets/framework/spinner.scss
@@ -0,0 +1,51 @@
+@mixin spinner-color($color) {
+  border-color: rgba($color, .25);
+  border-top-color: $color;
+}
+
+@mixin spinner-size($size, $border-width) {
+  width: $size;
+  height: $size;
+  border-width: $border-width;
+  @include webkit-prefix(transform-origin, 50% 50% calc((#{$size} / 2) + #{$border-width}));
+}
+
+@keyframes spinner-rotate {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  border-radius: 50%;
+  position: relative;
+  margin: 0 auto;
+  animation-name: spinner-rotate;
+  animation-duration: .6s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  border-style: solid;
+  display: inline-flex;
+  @include spinner-size(16px, 2px);
+  @include spinner-color($orange-600);
+
+  &.spinner-md {
+    @include spinner-size(32px, 3px);
+  }
+
+  &.spinner-lg {
+    @include spinner-size(64px, 4px);
+  }
+
+  &.spinner-dark {
+    @include spinner-color($gray-700);
+  }
+
+  &.spinner-light {
+    @include spinner-color($white);
+  }
+}
diff --git a/changelogs/unreleased/20084-update-the-spinner-component.yml b/changelogs/unreleased/20084-update-the-spinner-component.yml
new file mode 100644
index 00000000000..c93648e4f54
--- /dev/null
+++ b/changelogs/unreleased/20084-update-the-spinner-component.yml
@@ -0,0 +1,5 @@
+---
+title: Add a spinner icon which is rendered using pure css
+merge_request: 25186
+author:
+type: changed