<div class="progress-container">    
  <div class="progress progress-infinite">
    <div class="progress-bar" >
    </div>                       
  </div> 
</div>
.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%;
            }
        }
View Compiled
/* if you like ❤️ this pen */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.