Sha256: 49742d2800aa9933c1ee75ad7e245df69d4a218c7f40cfb2eb1fc7aa889d561d
Contents?: true
Size: 1.88 KB
Versions: 17
Compression:
Stored size: 1.88 KB
Contents
// Table of Contents
// ==================================================
// Keyframes
// Spinner
// Backdrop
// Keyframes
// ==================================================
@-webkit-keyframes spinner-colors {
0% { stroke: color(primary); }
34% { stroke: color(secondary); }
67% { stroke: color(tertiary); }
100% { stroke: color(quaditiary); }
}
@keyframes spinner-colors {
0% { stroke: color(primary); }
34% { stroke: color(secondary); }
67% { stroke: color(tertiary); }
100% { stroke: color(quaditiary); }
}
@-webkit-keyframes spinner-dash {
0% { stroke-dashoffset: 187; }
50% {
stroke-dashoffset: (187 / 4);
@include transform(rotate(135deg));
}
100% {
stroke-dashoffset: 187;
@include transform(rotate(450deg));
}
}
@keyframes spinner-dash {
0% { stroke-dashoffset: 187; }
50% {
stroke-dashoffset: (187 / 4);
@include transform(rotate(135deg));
}
100% {
stroke-dashoffset: 187;
@include transform(rotate(450deg));
}
}
@-webkit-keyframes spinner-rotator {
0% { @include transform(rotate(0deg)); }
100% { @include transform(rotate(270deg)); }
}
@keyframes spinner-rotator {
0% { @include transform(rotate(0deg)); }
100% { @include transform(rotate(270deg)); }
}
// Spinner
// ==================================================
.spinner {
@include animation(spinner-rotator 1.4s linear infinite);
bottom: 0;
left: 0;
margin: auto;
position: fixed;
right: 0;
top: 0;
z-index: 2050;
.bar {
@include animation(spinner-dash 1.4s ease-in-out infinite, spinner-colors (1.4s * 4) ease-in-out infinite);
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
}
}
// Backdrop
// ==================================================
.spinner-backdrop {
background: transparentize(color(white), 0.15);
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 2040;
}
Version data entries
17 entries across 17 versions & 1 rubygems