<svg width="558" height="13" viewBox="0 0 558 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="linearColors" x1="0" y1="0" x2="100%" y2="0" gradientUnits="userSpaceOnUse">
    <stop offset="0%" stop-color="#4b4cdd"></stop>
    <stop offset="16.67%" stop-color="#944cb8"></stop>
    <stop offset="31.25%" stop-color="#dd4b92"></stop>
    <stop offset="45.32%" stop-color="#e9687d"></stop>
    <stop offset="57.82%" stop-color="#f88a64"></stop>
    <stop offset="69.28%" stop-color="#ff9959"></stop>
    <stop offset="84.38%" stop-color="#72be9f"></stop>
    <stop offset="100.00%" stop-color="#41917e"></stop>
  </linearGradient>
  <rect rx="6" width="100%" height="100%" fill="url(#linearColors)"/>
</svg>
rect {
  animation: a 1s infinite linear alternate;
}

@keyframes a {
  to {
    width: 0%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.