<html>
  
  <head>
    <title>Animated Loading Bars</title>
  </head>
  
  <body>

    <svg id="loading-bar" xmlns="http://www.w3.org/2000/svg" width="36" height="22" viewBox="0 0 36 22">
      <g>
        <rect id="loading-bar-left" width="8" height="22"/>
        <rect id="loading-bar-middle" width="8" height="22" x="14"/>
        <rect id="loading-bar-right" width="8" height="22" x="28"/>
      </g>
    </svg>
    
  </body>
</html>
#loading-bar
  &-left
    animation: loading-bar-morph 1s linear .1s infinite
    transform-origin: center
  &-middle
    animation: loading-bar-morph 1s linear .2s infinite
    transform-origin: center
  &-right
    animation: loading-bar-morph 1s linear .4s infinite
    transform-origin: center

@keyframes loading-bar-morph 
  0%
    transform: scaleY(1)
  25%
    transform: scaleY(0.3)
  50%
    transform: scaleY(0.7)
  75%
    transform: scaleY(0.15)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.