CodePen

HTML

            
              <div class="animatedGradient">
  
</div>

<div class='description'>
  <p>
  Animated gradient - in this case used to create top bar for the page, could be used to show activity etc.
</p>
</div>
            
          
!

CSS

            
              body {
  background: #222;
  margin:0px;
  padding:0px;
  color:white;
}

.description {
  padding:100px;
  font-size:120%;
}

.animatedGradient {
  background: linear-gradient(to right,  rgba(109,179,242,1) 0%,rgba(84,163,238,1) 43%,rgba(191,224,255,1) 61%,rgba(109,179,242,1) 84%);
  width:100%;
  height:10px;
  background-size: auto 200%;
  background-position: 0 100%;
  animation: gradient 3s infinite;
  animation-fill-mode:forwards;
  animation-timing-function: linear;  
  
}

@keyframes gradient { 
  0% { 
		background-position: 0 0;
	} 

	100% { 
		background-position: -200% 0;
	} 

}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................