<div class="site-container">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="48" viewBox="0 0 32 24" class="bars-loader">
<rect class="morphing-bar morphing-bar-left" width="8" height="24" />
<rect class="morphing-bar morphing-bar-center" width="8" height="24" x="12" />
<rect class="morphing-bar morphing-bar-right" width="8" height="24" x="24" />
</svg>
</div>
:root {
--loader-body-bg-color: #1e272e;
--loader-body-color: #808e9b;
--loader-animation-speed: 0.75s;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font: 1em/160% sans-serif;
margin: 0;
background-color: var(--loader-body-bg-color);
color: var(--loader-body-color);
}
svg {
fill: currentColor;
max-width: 100%;
vertical-align: baseline;
}
.site-container {
padding: 2em;
min-height: 100vh;
display: grid;
place-items: center;
}
.bars-loader .morphing-bar {
transform-origin: center;
animation: morphingBar var(--loader-animation-speed) ease-in-out infinite;
}
.bars-loader .morphing-bar-left {
animation-delay: calc(var(--loader-animation-speed) / 2.5);
}
.bars-loader .morphing-bar-center {
animation-delay: calc(var(--loader-animation-speed) / 5);
}
.bars-loader .morphing-bar-right {
animation-delay: calc(var(--loader-animation-speed) / 7.5);
}
@keyframes morphingBar {
0%, 100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.5);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.