<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%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.