<div class="wrapper">
  <svg width="10" height="300" viewBox="0 0 10 300" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
    <rect width="10" height="300" fill="url(#gradientFill)" />
    <defs>
      <linearGradient id="gradientFill" x1="0" y1="0" x2="0" y2="300" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="slateBlue">
          <animate attributeName="stop-color" values="slateBlue; orange; slateBlue" dur="3s" repeatCount="indefinite"></animate>
        </stop>
        <stop offset="100%" stop-color="orange">
          <animate attributeName="stop-color" values="orange; slateBlue; orange" dur="3s" repeatCount="indefinite"></animate>
        </stop>
      </linearGradient>
    </defs>
  </svg>
</div>

.wrapper {
  position: relative;
  height: 300px;
  width: 10px;
}

svg {
  position: absolute;
  bottom: 0;
  animation: loader 3s infinite alternate linear;
  border-radius: 4px;
}

@keyframes loader {
  from {
    height: 0%;
  }

  to {
    height: 100%;
  }
}