angular-svg-progress

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:

Attribute Name	Type	Description	Default Value
shape	string	Shape of progress component. [bar, heart, circle]	rectangle
width	number	Total width in numbers(pixel)	100
height	number	Total height in numbers(pixel)	100
svgProgress	number	Dynamic progress value(in percentage)	NA
progressColor	string	Color of the progress indicator	red
borderColor	string	Color of the svg progress component border	black
showPercentage	boolean	To show the progress value	false
percentageColor	string	Progress value text color	black
showMiddleText	boolean	To show static text in the middle of the loader	false
middleText	string /number	static/dynamic text in the middle of the loader	NA
middleTextStyle	Object of type{textSize:number,fillColor:string,fontWeight:number/string}	style object for static text in the middle of the loader	null
direction	string	Direction in which progress indicator grows. [horizontal,vertical]	horizontal
backgroundFill	string	background color of the component svg	#eee8dc
fontSize	number	Font size of the progress value text(pixel)	15
borderRadius	number	Border radius for the svg component [only for shape bar]	10
radius	number	Radius of the circular progress	50
circleWidth	number	Width of the circular disk	15

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: