Background Progress Directive

A simple directive for Angular 12+ that renders a linear gradient background on the element simulating a simple progress bar.

The idea was to use it on inputs but can be used for other elements as well.

Install

npm i @swingerman/background-progress

Use

<form awmBackgroundProgress [fillPercent]="percent"></form>

Properties

| Name | Description | |------------|-------------| | @Input() backgroundColor: string | Sets the background color of the element | | @Input() foregroundColor: string | Sets the progress color | | @input() fillPercentGap: number | Sets the blur size at the edge of the progress color | | @input() fillPercent: number | Sets the actual percent |