Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Moving Gradient Bar In Css

Post a Comment
I would like to have a colored bar, with another color moving trough this bar. It should look like this, with the white part moving: I was thinking about something with gradient a

Solution 1:

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

HTML:

<body><divclass="background"><divclass="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.

Solution 2:

  1. Instead of linear-gradient you can use radial-gradient, in this case you will need just 5 color stops but not hundred.
  2. Instead of hundred keyframes you need just three of them: 0% 50% and 100% (or even just 2). All intermediate values will be interpolated.

Post a Comment for "Moving Gradient Bar In Css"