@indiekit/frontend
Version:
Frontend components for Indiekit
39 lines (33 loc) • 700 B
CSS
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.progress {
--label-font: var(--font-body);
align-items: center;
flex-direction: row-reverse;
gap: var(--space-s);
&:not([hidden]) {
display: inline-flex;
}
& .label {
color: var(--color-on-offset);
}
& progress {
animation: spin 1s linear infinite;
appearance: none;
block-size: 1.5em;
border: var(--border-width-thickest) solid var(--color-offset-variant);
border-inline-end-color: var(--color-on-offset);
border-radius: 100%;
inline-size: 1.5em;
margin: 0;
&::-webkit-progress-inner-element {
display: none;
}
}
}