kebs-progress-circle

kebs-progress-circle is a simple animated progress indicator with percentage value.

Prerequisites

This project requires NodeJS and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
6.4.1
v8.16.0

Table of contents

• Kebs progress circle
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
  • Built With

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

BEFORE YOU INSTALL: please read the prerequisites

To install and set up the library, run:

$ npm install kebs-progress-circle

Usage

app.module.ts

import { CommonModule } from  '@angular/common';
import { NgModule } from  '@angular/core';
import { AppComponent } from  './app.component';
import {KebsProgressCircleModule} from 'kebs-progress-circle'

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        CommonModule,
        KebsProgressCircleModule
    ],
    providers: [],
})

export  class  AppModule { }

app.component.html

<kebs-progress-circle 
[percentageValue]="70" [progressSpeed]="50" [loadBarColor]="#45546E" [loadBarBgColor]="#DADCE2">
</kebs-progress-circle>

Inputs

Property	Type	Description
percentageValue	number	Percentage value
progressSpeed	number	Progress bar speed (Indirectly propotional)
loadBarColor	string	Bar color
loadBarBgColor	string	Bar background color

Built With

• Angular
• VS code
• Love