Commit a235e602 authored by Fatih Acet's avatar Fatih Acet

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

Resolve "Update the spinner component"

Closes #20084

See merge request gitlab-org/gitlab-ce!25186
parents 790a51a4 9b9426bc
...@@ -66,3 +66,4 @@ ...@@ -66,3 +66,4 @@
@import 'framework/read_more'; @import 'framework/read_more';
@import 'framework/flex_grid'; @import 'framework/flex_grid';
@import 'framework/system_messages'; @import 'framework/system_messages';
@import "framework/spinner";
@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);
}
}
---
title: Add a spinner icon which is rendered using pure css
merge_request: 25186
author:
type: changed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment