loading concept 1

by sungsoonz

HTML

<!-- <svg width="33" height="200" viewBox="0 0 33 7" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="7" height="7" fill="#1BA8FB">

    <animateTransform id="scale1" attributeName="transform" type="scale" from="1 1" to="1 5" begin="0s; scale2.end" dur="2s" additive="sum" />
    <animateTransform id="scale2" attributeName="transform" type="scale" from="1 5" to="1 1" begin="scale1.end" dur="2s" additive="sum" />
  </rect>


  <rect x="13" width="7" height="7" rx="3.5" fill="#FF4370" />
  <rect x="26" width="7" height="7" rx="3.5" fill="#12324B" />
</svg> -->

<svg width="41" height="27" viewBox="0 0 41 27" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      #blue {
        transform-origin: top;
        transform: translateY(27px);
        animation: pulse 2s ease .2s infinite;
      }
      #grey {
        transform-origin: top;
        transform: translateY(27px);
        animation: pulse 2s ease .4s infinite;
      }
      #navy {
        transform-origin: top;
        transform: translateY(27px);
        animation: pulse 2s ease .6s infinite;
      }

      @keyframes pulse {
        0% {
          transform: translateY(27px) scaleY(1) ;
          /* transform: scaleY(1) */
        }

        50% {
          transform: scaleY(27);
        }

        100% {
          transform: translateY(0px);
          /* transform: translateY(27px) */
        }
      }

    </style>
  </defs>
  <rect id="blue" width="7" height="1" fill="#1BA8FB" />
    <!--     <animateTransform attributeName="fill-opacity" begin="0s" dur="2s" values="0;1;1;0" additive="sum" /> -->
<!--     <animateTransform id="rect1" attributeName="height" from="1" to="27" begin="0s" dur="1s" fill="freeze" calcMode="spline" keySplines="0.1 0.8 0.2 1;0.1 0.8 0.2 1" additive="sum" repeatCount="infinite" /> -->

  <rect id="grey" x="17" width="7" height="1" fill="#8EA8BD" />
  <rect id="navy" x="34" width="7" height="1" fill="#12324B" />
</svg>

CSS

body {
  background: #F7F9FB;
}
svg {
  display: block;
  margin: 8rem auto;
}