# angular-svg-progress

> SVG progress loader compactable for angular and ionic

Latest version **1.1.3** (published 2019-08-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-svg-progress
pnpm add angular-svg-progress
yarn add angular-svg-progress
bun add angular-svg-progress
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2019-08-07 |
| First published | 2019-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 120.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Justin K Xavier |
| Maintainers | jkxavier |
| Keywords | angular, loader, svg, ionic, typescript |

## Links

- npm: https://www.npmjs.com/package/angular-svg-progress
- Repository: https://github.com/justinkx/Angular-Svg-Progress
- Issues: https://github.com/justinkx/Angular-Svg-Progress/issues
- npm.io page: https://npm.io/package/angular-svg-progress

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2019-08-07
- 1.1.2 — 2019-05-29
- 1.1.1 — 2019-05-27
- 1.0.0 — 2019-05-17
- 0.0.1 — 2019-05-17

## README

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 ##
  <img src="https://user-images.githubusercontent.com/28846043/58533460-3d37ea00-8206-11e9-958d-f1d79af74dec.gif" alt="Appearence">

## 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**
```typescript
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)**
```typescript
import { AngularSvgProgressModule } from 'angular-svg-progress';

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

# Usage

## Basic Usage
This HTML code demonstrates basic usage of this module:

```html
<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:

---
_Source: https://npm.io/package/angular-svg-progress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._