Commit 9b9426bc authored by Brandon Labuschagne's avatar Brandon Labuschagne Committed by Fatih Acet

Add CSS needed for new spinner

The new spinner is purely CSS
It is used for the loading_icon gitlab-ui component
parent 790a51a4
......@@ -66,3 +66,4 @@
@import 'framework/read_more';
@import 'framework/flex_grid';
@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