@use 'sprucecss/scss/spruce' as *;
.preloader--circle {
--color: currentColor;
--border-width: 0.25em;
--size: 1.5rem;
--animation-duration: 1s;
block-size: var(--size);
inline-size: var(--size);
&::after {
animation: rotation var(--animation-duration) linear infinite;
block-size: var(--size);
border: var(--border-width) solid var(--color);
border-color: var(--color) transparent var(--color) transparent;
border-radius: 50%;
content: '';
display: flex;
inline-size: var(--size);
}
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.preloader--bars {
--color: currentColor;
--size: 1.5rem;
--animation-duration: 1s;
align-items: center;
block-size: var(--size);
display: flex;
inline-size: var(--size);
justify-content: space-between;
position: relative;
span {
animation: resize var(--animation-duration) infinite ease-in-out;
background: var(--color);
block-size: var(--size);
border-radius: 1px;
inline-size: calc(var(--size) / 6);
&:nth-child(1) { animation-delay: -0.3s; }
&:nth-child(2) { animation-delay: -0.15s; }
}
}
@keyframes resize {
0%,
80%,
100% {
transform: scaleY(1);
}
40% {
transform: scaleY(1.25);
}
}
<span class="preloader--circle"></span>
<span class="preloader--bars">
<span></span>
<span></span>
<span></span>
</span>