CODEWITHSUNDEEP
cssangulartypescriptanimation
Madmenyo
Madmenyo

Reputation: 8584

Modular progress bar

I am trying to make a modular animated progress bar that I can use like so:

<bar [type]="'health'" [percentage]="'80'"></bar>

It is working to the point I need to set different percentages. It does not need to be completely dynamic, just once the page loads it fill up the bar to X percentage I specify above.

*bar.component.html*
<div class="bar-wrapper">
  <div class="bar-label">CSS</div>
  <div class="bar-container">
    <div class="bar-fill" [style.width.%]="percentage" [@barAnimation]="state"></div> <!-- Tried several ways to set the CSS but it remains how I define it in the SCSS file. -->
    <div class="bar-percentage">{{percentage}}</div>
  </div>
</div>

bar.component.ts

@Component({
  selector: 'bar',
  templateUrl: './bar.component.html',
  styleUrls: ['./bar.component.scss'],
  animations: [
    trigger('barAnimation', [
      state('collapsed, void', style({ width: '0%'})),
      state('expanded', style({ width: '*'})), // <--- the width needs to be altered for each component.
      transition('* => expanded', [animate("4s cubic-bezier(0, -0.75, 0.25, 1)")])
  ])]
})
export class BarComponent implements OnInit {

  public state = "expanded";

  @Input() public type: String;
  @Input() public percentage: String;

  constructor() { }

  ngOnInit() {
    console.log(this.type + ", " + this.percentage);
  }

  public startAnimation() {
    this.state = "expanded";
  }
}

After fiddling around with this for way too long I figured * should do the trick on the width property. I can change my scss file manually and the bar works properly. So I guess I just need to set the CSS width property somehow.

Upvotes: 0

Views: 1002

Answers (1)

Lansana Camara
Lansana Camara

Reputation: 9871

Get rid of the barAnimation. You are making this more complicated than it needs to be. :)

Just use a simple CSS transition on width. Here is some pseudo code that should set you in the right direction:

CSS:

.bar {
    transition: width .5s ease;
    width: 0;
    height: 2px;
    background-color: green;
}

Template:

<div class="bar" [style.width.px]="width"></div>

Component:

@Component({...})
export class BarComponent {
    @Input() width: number = 0;
}

Any time the width property gets modified, the bar width will grow and it will grow in an animated style based on that transition in the CSS.

To test it out, just set a timer and increase the width to 50:

@Component({...})
export class BarComponent implements OnInit {
    @Input() width: number = 0;

    ngOnInit() {
        setTimeout(() => this.width = 100, 1000);
    }
}

After one second, the width will grow to 100 pixels.

If you want to swap out pixels for percentage, go right ahead -- it shouldn't have any effect on the animation itself.

Upvotes: 1

Related Questions