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