Create a gist now

Instantly share code, notes, and snippets.

// loading
.loading(
@size,
@spinner-inside-color,
@spinner-outside-color,
) {
opacity: 0.8;
z-index: 999999;
&:before,
&:after {
font-size: (@size*1px);
box-sizing: border-box;
content: '';
position: fixed;
border-radius: 50%;
border: solid .6em;
animation: rotation 1s linear infinite;
}
&:after {
@size-after: 4.8em;
width: @size-after;
height: @size-after;
border-color: @spinner-inside-color;
border-left-color: transparent;
top: calc(50% - (@size-after/2));
left: calc(50% - (@size-after/2));
}
&:before {
@size-before: 2.8em;
width: @size-before;
height: @size-before;
border-color: @spinner-outside-color;
border-right-color:transparent;
animation-duration: 2s;
top: calc(50% - (@size-before/2));
left: calc(50% - (@size-before/2));
}
}
@keyframes rotation {
from {
transform: rotate(0);
}
to {
transform: rotate(359deg);
}
}
@keyframes blink {
from {
opacity:.5;
}
to {
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment