ng-ls-simple-progress-bar v0.0.2

ng-ls-simple-progress-bar

A simple progress bar with two types of view and fully configurable.

What Can It Do?

Can use a simple progress bar configuring:

• Type view;
• Colors;
• Label;
• Sizes;

Install

npm i -g ng-ls-simple-progress-bar

Using

Import NgLsSimpleProgressBarModule in your app.module

import { NgLsSimpleProgressBarModule } from  'ng-ls-simple-progress-bar';

Include the selector in your html file to render the progress bar:

<lib-ng-ls-simple-progress-bar></lib-ng-ls-simple-progress-bar>

Component Inputs

The component abble some inputs, they're:

• Commons: - steps = Setting the number of segments that the progress bar will have; Default is 5 - percent = Setting the percent of filling progress bar. The min value is 0 and the max value is 100. Any value outside of this range will be ignored. Default is 0 - foregroundColor = Color of segments that's corresponding the percent filled. Default is #1890ff - backgroundColor = Color of segments that's corresponding the percent not filled. Default is #f3f3f3 - typeBar = Type of shape segments of progress bar. They can be "square" or "bubble". Default is 'square' - showLabel = Define if the label of the percent value is showed. Default is 'true'

• Type "Square": - whidthSegment = Setting the width of segments of progress bar. The unity used is pixels. Default is 14 - heightSegment = Setting the height of segments of progress bar. The unity used is pixels. Default is 8

• Type "Bubble": - radiusSegment = Setting the radius of segments of progress bar. The unity used is pixels. Default is 15

Usage examples

Exemple 1

<lib-ng-ls-simple-progress-bar  [typeBar]='"bubble"'  [radiusSegment]='10'  [steps]="10"  [percent]="50"></lib-ng-ls-simple-progress-bar>

Exemple 2

<lib-ng-ls-simple-progress-bar  [steps]="10"  [percent]="50"></lib-ng-ls-simple-progress-bar>

Exemple 3

<lib-ng-ls-simple-progress-bar  [typeBar]='"square"'  [radiusSegment]='10'  [steps]="10"  [percent]="75"  [heightSegment]="4"  [foregroundColor]="'#02cf39'"></lib-ng-ls-simple-progress-bar>

Exemple 4

<lib-ng-ls-simple-progress-bar  [typeBar]='"bubble"'  [radiusSegment]='5'  [steps]="10"  [percent]="43"  [foregroundColor]="'#e39b17'"></lib-ng-ls-simple-progress-bar>