Simple circular progress bar to be use in ionic, Angular and React
npm install simple-circular-progressSimple Circular Progress Bar is a web component to nicely show the progress in a circular manner.
Use npm to install the package
``bash`
npm install simple-circular-progress
Add below code to main.ts file
``
import { defineCustomElements } from 'simple-circular-progress';
.....
.....
defineCustomElements(window); // call the function here at the end of the file
import in your page module.ts file i.e. in your home.module.ts
`typescript
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; // Also import this
import 'simple-circular-progress';
@NgModule({
imports: [CommonModule, FormsModule, IonicModule, HomePageRoutingModule],
declarations: [HomePage],
schemas: [CUSTOM_ELEMENTS_SCHEMA], // here is the schema declaration to add
})
export class HomePageModule {}
`
In your html(view)
``
progress-percentage="40"
progress-color="#3f51b5"
progress-stroke-color="#f1f1f1"
label="40%
New "
label-font-size="1.3rem">
```
hide-label="false/true" // Hide label in the center of progress bar
progress-percentage="40" // Progress bar percentage only number
progress-color="#3f51b5" // Any valid color code to color progress
progress-stroke-color="#f1f1f1" // Any valid color code to color circular stroke
label="40%
New " // Any valid html to be display in center of progress bar
label-font-size="1.3rem" // Any valid font size to apply label
checkout the ionic example
checkout the angular example
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.