How to create a gradient progress animation using CSS

        .progress-container {
            width: 100%;
            text-align: center;
        }

        .progress {
            height: 2px;
        }

        .progress-bar {
            height: 5px;
            border-radius: 0px;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: colorAnimation 5s ease infinite;
        }

        @keyframes colorAnimation {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

<div class="progress-container">
    <div class="progress">
        <div class="progress-bar" >
        </div>
    </div>
</div>