Moving Gradient Bar in CSS

The html part is quiet easy, all you need is two different divs.

HTML:

<body>
    <div class="background">
        <div class="movement"></div>
    </div>
</body>

CSS:

.movement 
{
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0,255,0,0.7) 25%, white 50%, rgba(0,255,0,0.7) 75%, rgba(255, 255, 255, 0) 100%); 
    background: -o-linear-gradient(right,  rgba(255, 255, 255, 0) 0%, rgba(0,255,0,0.7) 25%, white 50%, rgba(0,255,0,0.7) 75%, rgba(255, 255, 255, 0) 100%); 
    background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(0,255,0,0.7) 25%, white 50%, rgba(0,255,0,0.7) 75%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(0,255,0,0.7) 25%, white 50%, rgba(0,255,0,0.7) 75%, rgba(255, 255, 255, 0) 100%); 
    width: 400px; 
    height: 5px; 
    position: relative;
    -webkit-animation: gradient 6s linear infinite;
    animation: gradient 6s linear infinite;
}
.background 
{
    width: 1000px;
    overflow: hidden;
    height: 5px;
    background-color: #070;
}
@-webkit-keyframes gradient
{
    0%   {left: -400px;}
    100% {left: 1000px;}
}
@keyframes gradient 
{
    0%   {left: -400px;}
    100% {left: 1000px;}
}

The background div is obviously for the background, size, color that's it.

The second div is the gradient div with your second color. It is colored with a gradient.
The animation causes the div to move over the background.

That's it! Try out here: http://jsfiddle.net/fgeLnbkm/2/

If you want to customize it, it's quiet handy, most of the things are easy to change, except from the gradient of the movement div.

How to create a vertical gradient bar with animation in it?

div {
  height: 400px;
  width: 20px;
  background: linear-gradient(0deg, #ffee00, #ff0000, #ff00ff);
  background-size: 200% 200%;

  -webkit-animation: AnimationName 5s ease infinite;
  -moz-animation: AnimationName 5s ease infinite;
  animation: AnimationName 5s ease infinite;
}

@keyframes AnimationName {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 00%}
}

<div></div>

CSS: how to create an infinitely-moving repeating linear gradient?

You need to run the animation a bit longer before looping back.

@keyframes AnimationName {
    0%{background-position:100% 50%}
    100%{background-position:-33% 50%} /* instead of 0% 50% */
}

I also changed the gradient angle to 90deg because the initial value makes the start and end of the gradient not matching very well

/* instead of 120deg */
background: repeating-linear-gradient(90deg, red,green,blue, green, red);

html, body{
  height: 100%;
  background: #222;
  overflow: hidden;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
}

*{
  color: white;
  font-family: 'Tahoma', sans-serif;
}

#wrapper {
    height: 50px;
    width: 400px;
    position: relative;
    background: #131313;
}

p{
    text-align: center;
    position: absolute;
    width: 100%;
}

#bar {
    background: repeating-linear-gradient(90deg, red,green,blue, green, red);
    background-repeat:repeat-x;
    height: 100%;
    position: absolute;
    background-size: 400% 100%;
    animation: AnimationName 3s linear infinite;
}

@keyframes AnimationName {
    0%{background-position:100% 50%}
    100%{background-position:-33% 50%}
}

<div id="wrapper">
    <div id="bar" style="width: 50%"></div>
    <p>Downloading 5 of 10</p>
  </div>

Make some gradient move endlessly in a progress bar like in Windows 7

Using this CSS you can let a gradient move endlessly (based on the link in Michael's comment):

.bar {
    background: -webkit-linear-gradient(left , #0193CD 30%, #66D4E5 80%, #0193CD 100%) repeat;
    -webkit-background-size: 50% 100%;
    -webkit-animation-name: moving-gradient;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes moving-gradient {
    0% {
        background-position: left bottom;
    }

    100% {
        background-position: right bottom;
    }
}

Demo: http://jsfiddle.net/jhogervorst/X78qN/2/

This only works in WebKit-based browsers (e.g., Safari and Chrome). To make it work in other browsers as well, see Michael's link and copy some more CSS.

Edit: I had to make it perfect. See the new demo for an almost-perfect Windows progress bar in CSS3 :)

Animate an SVG gradient bar to appear like it's filling with the stop colors

Maybe you want something like this:

<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 550 744.094 871.654">

    <defs>

      <linearGradient id="myGrad" >

        <stop offset="0" stop-color="yellow">

                <animate attributeName="offset" values="0" dur="2s" fill="freeze"  /> 

            </stop>

        <stop offset="0" stop-color="green" >

            <animate attributeName="offset" values="0;.2" dur="2s" fill="freeze"  /> 

        </stop>

        <stop offset="0" stop-color="blue" >

        <animate attributeName="offset" values="0;.5" dur="2s" fill="freeze"  /> 

        </stop>

        <stop offset="0" stop-color="red" >

            <animate attributeName="offset" values="0;1" dur="2s" fill="freeze"  /> 

        </stop>

        <stop offset="1" stop-color="transparent" />

        <animate />

      </linearGradient>

    </defs>

<path d="M740.096 599.704c-.027-8.88-7.245-16.055-16.123-16.028-8.88.03-16.055 7.248-16.028 16.127.014 4.4 1.8 8.377 4.668 11.272-8.59 28.308-21.002 55.294-37.011 80.391A328.59 328.59 0 0 1 635.908 742l-.266-.25a363.91 363.91 0 0 1-26.633 25.27 16.081 16.081 0 0 0-6.03-1.157c-8.877.027-16.054 7.246-16.025 16.125.002.803.08 1.583.198 2.35a347.143 347.143 0 0 1-6.908 4.942c-32.778 22.805-68.54 39.69-106.458 50.321a16.04 16.04 0 0 0-11.487-4.781c-7.366.022-13.545 5.004-15.425 11.768a382.23 382.23 0 0 1-64.675 5.518c-.74 0-1.483 0-2.226-.01a381.546 381.546 0 0 1-97.874-13.344c-1.671-7.411-8.299-12.947-16.216-12.925a16.533 16.533 0 0 0-10.72 3.992 387.615 387.615 0 0 1-55.212-25.694 387.43 387.43 0 0 1-70.985-51.554c.345-1.34.548-2.741.545-4.197-.031-9.154-7.475-16.551-16.63-16.527a16.874 16.874 0 0 0-3.306.344 347.345 347.345 0 0 1-35.2-46.19 346.111 346.111 0 0 1-37.443-79.483 16.52 16.52 0 0 0 4.7-11.606c-.03-9.154-7.473-16.554-16.629-16.527-9.157.028-16.556 7.476-16.527 16.63.024 7.932 5.62 14.537 13.065 16.146a362.193 362.193 0 0 0 39.28 83.476 363.588 363.588 0 0 0 36.575 48.045 16.476 16.476 0 0 0-1.042 5.794c.025 9.154 7.47 16.556 16.626 16.528a16.46 16.46 0 0 0 4.932-.76 403.53 403.53 0 0 0 74.128 53.867 403.134 403.134 0 0 0 57.52 26.77c1.203 8 8.095 14.133 16.424 14.109a16.53 16.53 0 0 0 11.606-4.8 397.583 397.583 0 0 0 14.54 3.959l.07-.279a397.86 397.86 0 0 0 87.68 10.298c.775.01 1.545.01 2.32.01a398.45 398.45 0 0 0 68.72-5.99 16.018 16.018 0 0 0 11.481 4.782c6.838-.024 12.648-4.317 14.953-10.342.514-.127 1.031-.243 1.545-.373l-.327-1.3c39.487-11.13 76.72-28.736 110.85-52.484a361.937 361.937 0 0 0 7.78-5.563 16.115 16.115 0 0 0 5.876 1.107c8.88-.032 16.055-7.25 16.026-16.13 0-.72-.068-1.424-.162-2.118 27.448-22.866 51.049-49.615 70.208-79.658a340.632 340.632 0 0 0 38.989-84.832c6.898-1.825 11.982-8.104 11.957-15.574"

        fill="url(#myGrad)" />

</svg>

How to create a gradient progress bar with a fixed gradient

A solution using mask that will work with dynamic width:

.progress-bar-container {
  height: 50px;
  margin: 50px 0px;
  background: black;
  position:relative; /* relative here */
}

.progress-bar-indicator {
  height: 100%;
  border-radius: 25px;
   /* this will do the magic */
  -webkit-mask:linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0);
}
.progress-bar-indicator::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: linear-gradient(to right, red, green, blue); /* your gradient here */
}

<div class="progress-bar-container">
  <div class="progress-bar-indicator" style="width:80%"></div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-indicator" style="width:50%"></div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-indicator" style="width:30%"></div>
</div>

Animating linear-gradient to create a loading bar

You don't need a gradient for this, just a pseudo-element, positioning & a transform.

.bar {

  width: 50%;

  height: 10px;

  background: lightgrey;

  margin: 2em auto;

  position: relative;

  overflow: hidden;

}

.bar::after {

  content: '';

  position: absolute;

  height: 100%;

  width: 30%;

  background: red;

  animation: progress 2s infinite linear;

}

@-webkit-keyframes progress {

  0% {

    left: 0;

    transform: translateX(-100%);

  }

  100% {

    left: 100%;

    transform: translateX(0%);

  }

}

<div class="bar"></div>

white bar now appearing below my animated gradient background

The issue is that you are using your "gradient" div as a background but it is outside of proper nesting as @dowomenfart (what a name) pointed out.

As you noticed when you made some changes, your opacity:0.1 rule then gives you undesired effect, but we can circumvent this issue!

First make sure your "gradient" div is the outermost nest only after <body>.

Remove the height:100% rule.
Now, remove your opacity rule, and instead apply it to your -webkit-gradient rule: (seeing as how you are using a library for this effect you will have to also edit your gradientscript.js file to support rgba instead of just rgb)

background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(220, 58, 120,0.1)), to(rgba(94, 50, 213,0.1)));

So your HTML should be like this-

 <html>
    <head></head>
    <body>
       <div id="gradient">
           <div id="container"></div>
           <div id="wrapper"></div>
           <div id="wrapper2"></div>
       </div>
    </body>

And your script file:

var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgba("+r1+","+g1+","+b1+",0.1)";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgba("+r2+","+g2+","+b2+",0.1)";

How to create an animated rounded progress bar with linear gradient?

To accomplish this, it is needed to make the yellow bar as an independent selector.

And using css, you can use :before selector inside #mydiv tag and place the yellow bar there as follows.

#mydiv {
  width: 400px;
  height: 50px;
  background-color: black;
  border-radius: 25px;
  position: relative;
}

#mydiv:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 20%;
  width: 40%;
  height: 100%;
  border-radius: 25px;
  background-color: yellow;
}

<div id="mydiv"></div>

Moving Gradient Bar in CSS