CSS bouncing line loader animation

Question

Im trying to create a simple loader animation that draws a line back and forth but currently is moving only in one direction. As soon as it reaches the middle of the animation it does not animate in the oposite direction.

This is my css

@keyframes loader-animation {
     0% {
          width: 0%;
     }

     49% {
         width: 100%;
     }

     50% {
         left: 100%;
     }

     100% {
         left: 0%;
         width: 100%
     }
 }

 .loader {
     height: 5px;
     width: 100%;
 }

 .loader .bar {
     position: relative;
     height: 5px;
     background-color: dodgerblue;
     animation-name: loader-animation;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 }

And my html

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

And a jsfiddle with the code

Can someone tell me what I'm doing wrong?

score 15 · Accepted Answer · edited Mar 17 '21 at 10:39

15

It is because you have a heavy break between 49% and 50%.

 49% {
     width: 100%;
 }

 50% {
     left: 100%;
 }

Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect:

@keyframes loader-animation {
    0% {
        width: 0%;
    }
    49% {
        width: 100%;
        left: 0%
    }
    50% {
        left: 100%;
    }
    100% {
        left: 0%;
        width: 100%
    }
}

Snippet

body {margin: 0; padding: 0;}
@keyframes loader-animation {
  0% {
    width: 0%;
  }
  49% {
    width: 100%;
    left: 0%
  }
  50% {
    left: 100%;
    width: 0;
  }
  100% {
    left: 0%;
    width: 100%
  }
}
.loader {
  height: 5px;
  width: 100%;
}
.loader .bar {
  position: absolute;
  height: 5px;
  background-color: dodgerblue;
  animation-name: loader-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

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

Fiddle: http://jsfiddle.net/praveenscience/06w7zwwm/

If you need a pulsating effect, you need to use two extremes:

@keyframes loader-animation {
    0% {
        left: -100%;
    }
    49% {
        left: 100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
}

Snippet

body {margin: 0; padding: 0; overflow: hidden;}
@keyframes loader-animation {
  0% {
    left: -100%;
  }
  49% {
    left: 100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}
.loader {
  height: 5px;
  width: 100%;
}
.loader .bar {
  width: 100%;
  position: absolute;
  height: 5px;
  background-color: dodgerblue;
  animation-name: loader-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

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

edited Mar 17 '21 at 10:39

Anand Gupta

5,640
3
27
37

answered Jun 22 '15 at 13:51

Praveen Kumar Purushothaman

164,888
24
203
252

3

Day 30. Still waiting for the snipped to finish loading – Nico O Jun 22 '15 at 13:54
@NicoO I don't understand. If you are sarcastic, then ha ha! `:D` – Praveen Kumar Purushothaman Jun 22 '15 at 13:54
1

Sorry, this was ment to be a joke ;) – Nico O Jun 22 '15 at 13:55
Your solution is not working. The line is still moving in only one direction and the left margin is still at 0% when it should animate from right to left – devconcept Jun 22 '15 at 13:59
@devconcept Do you want a pulsating effect? – Praveen Kumar Purushothaman Jun 22 '15 at 14:00
No. i'ts supposed to go from left to right and then from right to left. A pulsating effect can be easily created changing the animation-timing-function property – devconcept Jun 22 '15 at 14:05
@devconcept Check mine now? – Praveen Kumar Purushothaman Jun 22 '15 at 14:06
It will work when you add ``` animation-direction: alternate-reverse; ``` Meaning the .bar will be updated to below: ``` .loader .bar { width: 100%; position: absolute; height: 5px; background-color: dodgerblue; animation-name: loader-animation; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate-reverse; } ``` – Abel Agoi Mar 15 '20 at 15:59
1

@PraveenKumarPurushothaman, you are welcome. Here is a codepen link: https://codepen.io/agoiabel/pen/zYGjGOK to it. – Abel Agoi Mar 15 '20 at 17:44
That's great. Thanks a lot @AbelAgoi. – Praveen Kumar Purushothaman Mar 15 '20 at 18:24

score 5 · Answer 2 · answered Jun 22 '15 at 13:56

I have slightly changed your code, managed to make it work. Here's what I've changed:

 @keyframes loader-animation {
     0% {
         left: -100%;
     }
     49% {
         left: 100%;
     }
     50% {
         left: 100%;
     }
     100% {
         left: -100%;
     }
 }

Added overflow: hidden; to .loader

Added width: 100%; to .loader .bar

http://jsfiddle.net/wbyzy9jL/5/

CSS bouncing line loader animation

2 Answers2

Linked