0

I'm writing a custom progress bar using gradients and color stops.

See example: https://stackblitz.com/edit/angular-progress-bar-gradient

The problem I'm trying to fix is the animation is very "jumpy". I want to animate the progress bar so it fills smooth and gradually instead of instantly jumping to the new position.

I tried adding transition: all 0.4s ease-in; to my button but that does not seem to effect the gradient at all.

Component.ts

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  progressStyle = "#18191C";

  constructor() {
    const me = this;

    let perc = 0;
    setInterval(() => {
      me.progressStyle = `linear-gradient(90deg, #8354C1 ${perc}%, #18191C ${perc}%)`;
      perc += 5;
      if (perc >= 100) {
        perc = 0;
      }
    }, 300);
  }
}

Component.html

<button type="button" class="btn btn-secondary launch-btn" [style.background]="progressStyle">
  Testing
</button>

Component.css

.btn {
  height: 50px;
  box-shadow: none;
}
.btn[disabled] {
  cursor: default;
}
.btn.launch-btn {
  border: none;
  transition: all 0.4s ease-in;
  width: 500px;
}
Jonathan Beaudoin
  • 2,158
  • 4
  • 27
  • 63

1 Answers1

0

Gradients don't support transition.

Why not increase the resolution? So you can get the behavior you want.

Demo, Project

BOZ
  • 2,731
  • 11
  • 28
  • Two reasons, one being the percentage is sent from another application over a websocket. With higher resolutions the amount of calls increase by orders of magnitude. Second being, your demo jumps for me as well. – Jonathan Beaudoin Oct 31 '20 at 21:34
  • Then you will have to deal with this in other ways. For example the ` – BOZ Oct 31 '20 at 21:38
  • Yeah I'm going to try using another div which just grows in width. Thanks for the suggestion. – Jonathan Beaudoin Oct 31 '20 at 21:42
  • I can suggest the following to speed up your works: https://getbootstrap.com/docs/4.5/components/progress/#labels It contains `.progress-bar` in `.progress` element. – BOZ Oct 31 '20 at 21:46