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

What is the best way to align text with my CSS number and circle on the same line?

Turning off the ability to horizontally scroll in an iframe using touch controls

RxJs: Generating an observable based on changes in a field's value

What is the best way to specify the border color of a fieldset?

Enhancing Angular Material forms with custom background colors

Can you explain the steps to implement this feature in a modal window using jQuery?

Tips for keeping a label above an input field

How can I adjust the animation speed for ChartJS graphics?

There is an issue with the Next.js middleware: [Error: The edge runtime is not compatible with the Node.js 'crypto' module]

How can I adjust two overlapping divs for proper display?

What is causing my HTML file path to function on my server, but not when I access the HTML file directly?

Tips for creating a script that compiles all SCSS files into CSS within a Vue 3 project

angular2: Comparing Routes without Components to Routes with Empty Paths

Tips for getting Angular's HttpClient to return an object rather than a string?

The challenge of handling Set type in TypeScript errors

Angular: Nested FormArray not populating the values in the FormControls

Using Kendo PanelBarItem to incorporate a personalized component as a child element

get a collection of chosen files in angular 7 and save them to

Angular 2: Streamlining user interface connections with extensive data rows

Decrease initial loading time for Ionic 3