1

I want to create animation like progressbar for that I have written following code

My code

.box {
  width: 26px;
  height: 10px;
  display: inline-block;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, red 50%, black 50%);
  -webkit-animation: progressbar 1s ease infinite;
  -moz-animation: progressbar 1s ease infinite;
  -o-animation: progressbar 1s ease infinite;
  animation: progressbar 1s ease infinite;
}

@-webkit-keyframes progressbar {
  0% {
    opacity: 1;
    background-position: 0 0;
  }
  100% {
    opacity: 1;
    background-position: -100% 0;
  }
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

My problem is all animation working at same time I want to add animation one bye one after one finishes in infinite loop like progress bar. Can animation-timing-function: linear, steps(3, end); will helps? Please help me in this. Thanks

  • You can use animation-delay property for 2nd & 3rd div animation like .box:nth-child(2){animation-delay: 2s} & .box:nth-child(3){animation-delay: 3s} and fill background with :before OR :after css property. – Raeesh Alam Feb 3 at 7:26
3

you can set animation-delay but for that, you'll need to remove the !important also if there's an N amount of boxes you can add the style using JS or SCSS loop.

.box {
  width: 26px;
  height: 10px;
  display: inline-block;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, red 50%, black 50%);
  -webkit-animation: progressbar 1s ease infinite;
  -moz-animation: progressbar 1s ease infinite;
  -o-animation: progressbar 1s ease infinite;
  animation: progressbar 1s ease infinite;
}

.box:nth-child(2) {
  animation-delay: 1s;
}

.box:nth-child(3) {
  animation-delay: 2s;
}

@-webkit-keyframes progressbar {
  0% {
    opacity: 1;
    background-position: 0 0;
  }
  100% {
    opacity: 1;
    background-position: -100% 0;
  }
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

if you wanted each one to stop before restarting you can do this:

.box {
  width: 26px;
  height: 10px;
  display: inline-block;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, red 50%, black 50%);
  -webkit-animation: progressbar 3s ease infinite;
  -moz-animation: progressbar 3s ease infinite;
  -o-animation: progressbar 3s ease infinite;
  animation: progressbar 3s ease infinite;
}

.box:nth-child(2) {
  animation-name: progressbar1;
}

.box:nth-child(3) {
  animation-name: progressbar2;
}

@-webkit-keyframes progressbar {
  0% {
    background-position: 0 0;
  }
  33%,
  100% {
    background-position: -100% 0;
  }
}

@-webkit-keyframes progressbar1 {
  0%,
  33% {
    background-position: 0 0;
  }
  66%,
  100% {
    background-position: -100% 0;
  }
}

@-webkit-keyframes progressbar2 {
  0%,
  66% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

  • Thanks but this is not a result I want. I want infinite animation but one after another. – vedankita kumbhar Feb 3 at 7:25
0

If you simply want the visual effect, here is an idea with one element and one animation

.box {
  width: 100px;
  height: 10px;
  background: 
    linear-gradient(#fff,#fff) 32% 0,
    linear-gradient(#fff,#fff) 68% 0,
    linear-gradient(red, red),
    black;
  background-repeat:no-repeat;
  background-size:5px 100%,5px 100%,0% 100%;
  animation: progressbar 1s ease infinite;
}

@keyframes progressbar {
  100% {
    background-size:5px 100%,5px 100%,100% 100%;
  }
}
<div class="box"></div>

If you want transparency we can add mask:

.box {
  width: 100px;
  height: 10px;
  background: 
    linear-gradient(red, red) no-repeat,
    black;
  background-size:0% 100%;
  -webkit-mask:
    linear-gradient(#fff,#fff) left,
    linear-gradient(#fff,#fff) center,
    linear-gradient(#fff,#fff) right;
  -webkit-mask-size:30% 100%;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(#fff,#fff) left,
    linear-gradient(#fff,#fff) center,
    linear-gradient(#fff,#fff) right;
  mask-size:30% 100%;
  mask-repeat:no-repeat;
  animation: progressbar 1s ease infinite;
}

@keyframes progressbar {
  100% {
    background-size:100% 100%;
  }
}
body {
 background:pink;
}
<div class="box"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.