56 lines
891 B
CSS
56 lines
891 B
CSS
|
@layer base {
|
||
|
|
.spinner {
|
||
|
|
position: relative;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
color: currentColor;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spinnerInner {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 2px solid transparent;
|
||
|
|
border-top-color: var(--spinner-color, var(--primary));
|
||
|
|
animation: spin var(--animation-duration-slow) linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sm {
|
||
|
|
width: 1rem;
|
||
|
|
height: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sm .spinnerInner {
|
||
|
|
border-width: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.md {
|
||
|
|
width: 1.5rem;
|
||
|
|
height: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.md .spinnerInner {
|
||
|
|
border-width: 2.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lg {
|
||
|
|
width: 2.5rem;
|
||
|
|
height: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lg .spinnerInner {
|
||
|
|
border-width: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|