Progress Bar Modules

Question

Progress Bar Modules

I am currently working on creating a customizable animated progress bar that can be utilized as follows:

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

It is functional up to the point where I need to adjust different percentages. It doesn't have to be completely dynamic, just when the page loads it should fill up the bar to the percentage specified 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> <!-- I've tried various methods to set the CSS, but it remains as defined 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 spending quite some time experimenting with this, I realized using * might be the solution for adjusting the width property. Manually changing my scss file makes the bar function correctly. So, I guess the challenge lies in somehow setting the CSS width property.

css angular typescript animation

Answer 1

Answer №1

Eliminate the barAnimation. Keep it simple and straightforward. :)

Just utilize a basic CSS transition on width. Here is some pseudo code to guide you:

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;
}

Whenever the width property is changed, the bar's width will expand with an animated effect based on the CSS transition.

To test it, 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 increase to 100 pixels.

If you prefer using percentages instead of pixels, feel free to do so -- it should not impact the animation itself.

Answer 2

Eliminate the barAnimation. Keep it simple and straightforward. :)

Just utilize a basic CSS transition on width. Here is some pseudo code to guide you:

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;
}

Whenever the width property is changed, the bar's width will expand with an animated effect based on the CSS transition.

To test it, 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 increase to 100 pixels.

If you prefer using percentages instead of pixels, feel free to do so -- it should not impact the animation itself.

Progress Bar Modules

Answer №1

Similar questions

Encountering an issue when retrieving the value from a template-driven Angular form

Padding on a flex item nudges a neighboring flex item out of place

The Extended Date type is indicating that the function cannot be located

Challenges in integrating a PrimeNG Angular2 component with DynamicDialogRef, as well as the difficulties encountered when attempting to do

Generate a fresh line within the source code

Different "criteria" for CSS wildcard selectors using Selenium

Is it considered an anti-pattern in TypeScript to utilize BehaviorSubject for class or object properties?

Unable to apply "@angular/fire" using ng add command because the package does not have schematic support

The Angular HttpErrorResponse is a class used for handling

Using jQuery to generate nested lists

Why does my ng2 validator insist on enclosing my validation messages in the newline character ` `?

The React type '{ hasInputs: boolean; bg: string; }' cannot be assigned to the type 'IntrinsicAttributes & boolean'

Enhance ngx-bootstrap's tab content with ngx-scrollbar functionality

Considering the move from AngularJS 1.4 to Angular 8 is a significant one, the question arises: should one opt to migrate to 1.5 before upgrading

What is the necessity of ngrx/store when services and localStorages are available for use?

Guide on creating a Jasmine test for a printer utility

Creating a parameterized default route in Angular 2

Error occurs in Windows script while running a project installed globally

Angular2 app fails to update after emitting an event

Troubleshooting a Minimum Width Problem in HTML and CSS