Animation for indeterminate progress bar?


#1

Hello, I’m trying to animate the indeterminate progress bar and I can’t seem to get it to animate… I’ve looked at the post about this on css-tricks. I’m currently using this code:

progress:not([value]) {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;

  &::-webkit-progress-bar {
    background-image: -webkit-linear-gradient(left, @magenta, @darkpurple);
    -webkit-animation: animate-stripes 5s linear infinite;
            animation: animate-stripes 5s linear infinite;
  }
}

@-webkit-keyframes animate-stripes {
   100% { background-position: -100px 0px; }
}

@keyframes animate-stripes {
   100% { background-position: -100px 0px; }
}

I’ve also tried this, but nothing happens still…

progress {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  background-image: -webkit-linear-gradient(left, @magenta, @darkpurple);
  -webkit-animation: animate-stripes 5s linear infinite;
  animation: animate-stripes 5s linear infinite;
}

I’ve also seen the other topic about this, but it only pointed me to the last code block which didn’t work as already said…


#2

I’m not sure what this is.


#3

I assume he means something like the progress bar that shows up when you go to install an Atom package.


#4

Here’s an example.


#5

Okay, but you said the indeterminate progress bar, which suggests that you mean one inside Atom, either part of the program or provided by a package. If you share which progress bar you’re interested in animating, we can help you find the way to address it via CSS.


#6

The one that’s part of the program, if correct in the style guide in the loading section.


#7

This is what I see for the CSS styling of that element:

progress:indeterminate {
    background-image: linear-gradient(-45deg, transparent 33%, rgba(86, 138, 242, 0.2) 33%, rgba(86, 138, 242, 0.2) 66%, transparent 66%);
    background-size: 25px 8px, 100% 100%, 100% 100%;
    -webkit-animation: progress-buffering 5s linear 12, progress-buffering 5s 60s steps(10) 108;