<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);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.