A Pen by Secret Sam.

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by A Non Ymous on CodePen.

License.

index.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>

style.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;
	} 

}