Moezalez Moezalez - 4 months ago 28
CSS Question

Animating linear-gradient to create a loading bar

I want to build a loading bar, with one coloured element going a long a grey bar.

I am fairly bad at CSS, so I have some trouble with animating gradients.
My current approach is based on this answer: Make some gradient move endlessly in a progress bar like in Windows 7

foo {
background-color: $cGray300;
height: 10px;
background: linear-gradient(to right, $cGray300 0%, $cGray300 30%, #fed0d0 30%, #fed0d0 40%, $cGray300 40%, $cGray300 100%) repeat;
background-size: 50% 100%;
animation-name: moving-gradient;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

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


This is the result:
current progress

Though I want one, red bigger element that reappears on the left when it disappears on the right.

Answer

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>