Last active
February 10, 2019 01:52
-
-
Save exogen/81df893329c11c0da3cc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Default mixin settings | |
@spinner-default-color: #000; | |
@spinner-default-size: 16px; | |
// Opacity, spacing, speed | |
@spinner-opacity: 70%; // Opacity of the brightest dot | |
@spinner-decay: 0.7; // Opacity of each dot compared to the previous | |
@spinner-spacing: 1; // Distance multiplier between dots | |
@spinner-duration: 1s; // Time it takes for one revolution | |
// Shape | |
@spinner-font: sans-serif; | |
@spinner-content: '\25cf'; // Unicode BLACK CIRCLE | |
// Center alignment parameters (may need to tweak for different fonts) | |
@spinner-center-x: 0.25em; | |
@spinner-center-y: 0.5em; | |
.spinner-animation(@name, @color) { | |
@color-1: fade(@color, @spinner-opacity * pow(@spinner-decay, 0)); | |
@color-2: fade(@color, @spinner-opacity * pow(@spinner-decay, 1)); | |
@color-3: fade(@color, @spinner-opacity * pow(@spinner-decay, 2)); | |
@color-4: fade(@color, @spinner-opacity * pow(@spinner-decay, 3)); | |
@color-5: fade(@color, @spinner-opacity * pow(@spinner-decay, 4)); | |
@color-6: fade(@color, @spinner-opacity * pow(@spinner-decay, 5)); | |
@horizontal-offset-1: 0.4em * @spinner-spacing; | |
@horizontal-offset-2: 1.2em * @spinner-spacing; | |
@horizontal-offset-3: 1.6em * @spinner-spacing; | |
@vertical-offset-1: 0.7em * @spinner-spacing; | |
@vertical-offset-2: -0.75em * @spinner-spacing; | |
@keyframes @name { | |
0% { | |
width: 4em * @spinner-spacing; | |
color: @color-1; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-2, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-3, | |
@horizontal-offset-3 0 0 @color-4, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-5, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-6; | |
} | |
17% { | |
color: @color-2; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-3, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-4, | |
@horizontal-offset-3 0 0 @color-5, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-6, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-1; | |
} | |
33% { | |
color: @color-3; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-4, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-5, | |
@horizontal-offset-3 0 0 @color-6, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-1, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-2; | |
} | |
50% { | |
color: @color-4; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-5, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-6, | |
@horizontal-offset-3 0 0 @color-1, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-2, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-3; | |
} | |
67% { | |
color: @color-5; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-6, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-1, | |
@horizontal-offset-3 0 0 @color-2, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-3, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-4; | |
} | |
83% { | |
color: @color-6; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-1, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-2, | |
@horizontal-offset-3 0 0 @color-3, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-4, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-5; | |
} | |
100% { | |
width: 4em * @spinner-spacing; | |
color: @color-1; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-2, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-3, | |
@horizontal-offset-3 0 0 @color-4, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-5, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-6; | |
} | |
} | |
@-webkit-keyframes @name { | |
0% { | |
width: 4em * @spinner-spacing; | |
color: @color-1; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-2, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-3, | |
@horizontal-offset-3 0 0 @color-4, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-5, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-6; | |
} | |
17% { | |
color: @color-2; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-3, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-4, | |
@horizontal-offset-3 0 0 @color-5, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-6, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-1; | |
} | |
33% { | |
color: @color-3; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-4, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-5, | |
@horizontal-offset-3 0 0 @color-6, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-1, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-2; | |
} | |
50% { | |
color: @color-4; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-5, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-6, | |
@horizontal-offset-3 0 0 @color-1, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-2, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-3; | |
} | |
67% { | |
color: @color-5; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-6, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-1, | |
@horizontal-offset-3 0 0 @color-2, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-3, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-4; | |
} | |
83% { | |
color: @color-6; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-1, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-2, | |
@horizontal-offset-3 0 0 @color-3, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-4, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-5; | |
} | |
100% { | |
width: 4em * @spinner-spacing; | |
color: @color-1; | |
text-shadow: @horizontal-offset-1 @vertical-offset-1 0 @color-2, | |
@horizontal-offset-2 @vertical-offset-1 0 @color-3, | |
@horizontal-offset-3 0 0 @color-4, | |
@horizontal-offset-2 @vertical-offset-2 0 @color-5, | |
@horizontal-offset-1 @vertical-offset-2 0 @color-6; | |
} | |
} | |
} | |
.spinner-animation(bd-default-spinner, @spinner-default-color); | |
.default-spinner(@size: @spinner-default-size, @animation: bd-default-spinner) { | |
display: block; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
right: auto; | |
bottom: auto; | |
width: 0; | |
padding: (2em * @spinner-spacing) 0; | |
margin: -(2em * @spinner-spacing + @spinner-center-y) 0 0 -(0.8em * @spinner-spacing + @spinner-center-x); | |
font-size: @size; | |
font-weight: normal; | |
line-height: 1em; | |
content: @spinner-content; | |
text-align: left; | |
color: @spinner-default-color; | |
animation: @animation @spinner-duration linear 0s infinite; | |
-webkit-animation: @animation @spinner-duration linear 0s infinite; | |
} | |
.loading { | |
&:before { .default-spinner(); } | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment