2

What I'm trying to achieve is an indeterminate progress bar that do not freeze when executing background tasks.

I already tried the following ways and all of them causes the progress bar to stop its animation whenever I do another heavy task:

The interesting thing is that I managed to have a spinner, which consists in one single refresh icon with the following animation, and it never freezes during the heavy tasks:

// Refresh animation that never stops.

.spin {
  animation : spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform : rotate(0deg);
  }

  100% {
    transform : rotate(360deg);
  }
}

From what I've been reading, it seems that some CSS3 animations works in a separate browser thread, and also that some other animations in the same thread can continue to work if they do not need to be updated in the meantime, ex: simple images animating like the spinning refresh icon, but I've not been able to achieve the very same effect for an MD indeterminate progress bar.

Any ideas on how to accomplish an unstoppable progress bar? :D

Thanks

Diosney
  • 10,520
  • 15
  • 66
  • 111
  • IIRC keyframes are limited in this approach, if you need fine tuning on a progress bar to stop an animation by watching a task, you need to use CSS transitions + Javascript. Checkout https://cssanimation.rocks/transition-vs-animation/ – Vincent Tang May 12 '18 at 16:15
  • 1
    @Kagerjay Hi, thanks for the comment. sadly I cannot use transitions with javascript because it will freeze the animation too, my main requirement is that the animation doesn't stops whenever a background task is running. Any ideas? – Diosney May 12 '18 at 20:29
  • On the javascript "Freezing" the animation, have you tried putting the code through loupe? http://latentflip.com/loupe/ . It probably freezes because render gets blocked. I suggest watching that video its probably relevant to your problem. – Vincent Tang May 13 '18 at 03:41
  • Also, if you want a pure CSS implementation, have you tried using 2 seperate CSS classes (one that is static nonloading progress bar, the other is a constantly loading bar). You could use jquery / javascript to toggle which state to use (e.g. have it toggle a CSS class only). Also, SVG mask overlays might be something you want to look into – Vincent Tang May 13 '18 at 03:42
  • For animation on the web in general, you don't have to use keyframes. There's a few alternatives: 1. Using a gif (but comes with big .gif file), 2. Using a CSS sprite image with transition. Like this. https://codepen.io/SitePoint/pen/zxXrzP . Just food for thought. I haven't personally delved too much into progress bars honestly. Perhaps look into a JS library specialized in animation like greensock for ideas as well? https://greensock.com/ – Vincent Tang May 13 '18 at 03:48
  • @diosney did you ever find something that worked? – darbid Apr 18 '21 at 05:57
  • @darbid It has been a loong time and I don't remember clearly, but most likely that I didn't have found any direct solution to this. For what I slightly recall, I went with a workaround to mask this bug. – Diosney Apr 20 '21 at 18:48

0 Answers0