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

Resolve "Update the spinner component"

Closes #20084

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

app/assets/stylesheets/framework.scss

@@ -66,3 +66,4 @@
 @import 'framework/read_more';
 @import 'framework/flex_grid';
 @import 'framework/system_messages';
+@import "framework/spinner";

app/assets/stylesheets/framework/spinner.scss

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

changelogs/unreleased/20084-update-the-spinner-component.yml

+---
+title: Add a spinner icon which is rendered using pure css
+merge_request: 25186
+author:
+type: changed