Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass loader
<div class="lds-spinner">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
/** for custom sizes, respect this schema
.custom {
width: ($top + $left) * 2;
height: ($top + $left) * 2;
div {
transform-origin: $top + $left $top + $left;
&:after {
top: $top; <-- important variable
left: $left; <-- important variable
width: $left * 2;
height: $top * 6;
}
}
}
*/
.lds-spinner {
color: #000;
display: inline-block;
position: relative;
width: 42px;
height: 42px;
div {
transform-origin: 21px 21px;
animation: lds-spinner 1.2s linear infinite;
&:after {
content: " ";
display: block;
position: absolute;
top: 2px;
left: 19px;
width: 4px;
height: 12px;
border-radius: 20%;
background: #000;
}
@for $i from 0 through 11 {
$value: 30;
$unit: 0.1;
&:nth-child(#{$i + 1}) {
transform: rotate(#{$value * ($i)}deg);
animation-delay: -#{(1 + $unit) - ($i * $unit)}s;
}
}
}
}
@keyframes lds-spinner {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.