Code Monkey home page Code Monkey logo

mgxcircularprogressbar's Introduction

MgxCircularProgressBar

Description:

A library for circular progress bars components, an elegant way to rappresent your percentages.

Demo

this Demo has different combinations of progress bars, choose your favorite one!

Demo img

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Installation:

  npm install mgx-circular-progress-bar --save

Import and usage

include mgx-circular-progress module in your project, for example if you want to add it to your app module:

App Module

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MgxCircularProgressModule } from 'mgx-circular-progress-bar';
//or in alternative
import { MgxCircularProgressBarModule, 
MgxCircularProgressFullBarModule, 
MgxCircularProgressPieModule } from'mgx-circular-progress-bar';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MgxCircularProgressModule
    //or in alternative
    MgxCircularProgressBarModule,
    MgxCircularProgressFullBarModule,
    MgxCircularProgressPieModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Basic usage:

mgx-circular-progress-bar

 <mgx-circular-progress-bar percentage="20"></mgx-circular-progress-bar>

mgx-circular-progress-full-bar

 <mgx-circular-progress-full-bar percentage="20"></mgx-circular-progress-full-bar>

mgx-circular-progress-pie

 <mgx-circular-progress-pie percentage="20"></mgx-circular-progress-pie>

Main configurations

attribute value expected meaning
percentage from 0 to 100 percentage already calculated
total any number in combination with barValue calculate the percentage, must be >= than barValue
barValue any number is the value of the progress bar, the percentage is calculated in relation to the total, must be <= to the total
diameter any number number of pixels to establish the total size of the circumference
fontSize any number override default font-size style of percentage value, is defined in pixels
color HEX value bar/pie/full-bar color; example: #e22525 default color: #3282b8
bgColor HEX value bar/pie/full-bar background color; example: #e0e0e0 default color: #eee
contentTemplate TemplateRef allows you to overwrite the default percentage with a new template, to use it you need to pass the reference of a template through its selector #tlpName to this attribute, in alternative you can pass your content directly inside tags, see the Demo for examples

Full-Bar configurations

all the main ones plus the following

attribute value expected meaning
contentSize from 20 to 83 value to define the size of background circle, default: 83
pathPosition from 20 to 90 value to define a new bar position, default: 90

Pie configurations

all the main ones plus the following

attribute value expected meaning
bgSize from 0 to 10 value to define the size of background circle, default: 10

mgxcircularprogressbar's People

Contributors

marco-gonella avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.