I have a progress bar, I need to make it an animated background, here’s an example:

.progress-bar { position: relative; overflow: hidden; height: 8px; border-radius: 5px; margin: 8px 0; background: linear-gradient(to right, #4A90E2 0%, #9BFAC0 50%, #4A90E2 100%); background-size: 200% 100%; animation: progress 3s ease infinite; border: 1px solid #CCC; } @keyframes progress { 0% { background-position: 200% 0% } 99% { background-position: 0% 0% } 100% { background-position: 0% 0% } } 
 <div class="progress-bar"></div>

With this animation, the load on cpu in the region of 10-30% of the macbookpro without a separate gpu.

Maybe someone came across this and how is it possible to implement such an animation without such a load?

Of course, I thought that background-position animation is not the best option, but absolutely the same behavior even with inserting png pictures with animation on translateX (and indicating will-change: transform)

I experiment further, the problem is made even without a gradient, with the most lightweight code and simple linear animation:

 .progress-bar { position: relative; overflow: hidden; height: 8px; border-radius: 5px; margin: 8px 0; background: #4A90E2; border: 1px solid #CCC; } .progress-bar:before { content: ''; display: block; background: #9BFAC0; width: 50%; height: inherit; animation: progress 3s linear infinite; will-change: transform; } @keyframes progress { from { transform: translateX(-200%) } to { transform: translateX(200%) } } 
 <div class="progress-bar"></div>

UPD I tried almost all the options and did not find a solution. You can reduce the load by changing the animation by doing it at intervals. A similar load is shown on toggle class + transition. SVG animation - 1.5 times the load. Everything that is in Google that will-change and null transform does not help. Does gif remain? But he, too, will be redrawn, but he can set the frame rate.

  • And if colors with transparency are worse or the same? - Stranger in the Q
  • I would advise moving the object inside the Progressbar with the existing gradient - Ruslan Semenov
  • @RuslanSemenov - tried, wrote about it too. Stranger in the Q - about the same - Artem Gorlachev

1 answer 1

Here is an example.

 .progress-bar { position: relative; overflow: hidden; height: 8px; border-radius: 5px; margin: 8px 0; border: 1px solid #CCC; background-color: #4A90E2; } .progress-bar span { display: block; position: relative; left: -100%; top: 0; width: 200%; height: 100%; background: linear-gradient(to right, #4A90E2, #9BFAC0 50%, #4A90E2); animation: progress 3s ease infinite; } @keyframes progress { 0% { left: -200% } 100% { left: 200% } } 
 <div class="progress-bar"> <span></span> </div>

  • My kanesh is not a MacBook, but in my case, your version eats only 1% less - Nilsan
  • For good, you can refuse to become easier, you need to try - Ruslan Semenov
  • @RuslanSemenov declined even from the gradient, and there are no special improvements; ( - Artem Gorlachev
  • Interestingly, I have no load, but have you tried another browser besides safari? - Ruslan Semenov
  • @RuslanSemenov I'm in chrome, you may have a discrete graphics card, I have integrated. - Artem Gorlachev