angular-svg-progress v1.1.3

https://badgen.net/bundlephobia/minzip/angular-svg-progress 1.7 min zipped lightweight progress bar

Angular SVG Progress

SVG Progress component for angular and ionic framework consist of bar, heart and circular loaders.

Appearance

Features

• Each loader component is an svg.
• Consist of bar, heart and circular loaders.
• Can be scaled to any size.
• customize color, size, value, border-radius, direction.

Installation

1. Install the NPM Package

npm install --save angular-svg-progress

2. Import AngularSvgProgressModule module

Add AngularSvgProgressModule in your app's root module

import { AngularSvgProgressModule } from 'angular-svg-progress';

// import the module
@NgModule({
  ...
  imports: [
    AngularSvgProgressModule
  ]
})
export class AppModule {}

For Lazy Loaded Components add AngularSvgProgressModule in your child/shared module(s)

import { AngularSvgProgressModule } from 'angular-svg-progress';

@NgModule({
  ...
  imports: [
    AngularSvgProgressModule
  ]
})
export class SharedModule {}

Usage

Basic Usage

This HTML code demonstrates basic usage of this module:

<angular-svg-progress
  [svgProgress]="Progress"
  style="margin-bottom: 25px;"
  [width]="500"
  [shape]="'rectangle'"
  [borderColor]="'#383a3e'"
  [direction]="'horizontal'"
  [showMiddleText]="true"
  [middleTextStyle]="{textSize: 12,fontWeight: 400}"
  [showPercentage]="true"
  [height]="40"
  [progressColor]="'#FF0000'">
</angular-svg-progress>

Advanced Usage

The <angular-svg-progress /> component takes many attributes that allows you to customize the progress. You can use the following table as a reference:

Support this project

If you find this project useful, please star the repo to let people know that it's reliable. Also, share it with friends and colleagues that might find this useful as well. Thank you :smile: