Skip to content

Instantly share code, notes, and snippets.

@exogen

exogen/spinner.less

Last active February 10, 2019 01:52
Show Gist options
  • Save exogen/81df893329c11c0da3cc to your computer and use it in GitHub Desktop.
Save exogen/81df893329c11c0da3cc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
spinner.less
// 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