Exciting news!Announcing our $4.6M Series Seed. Learn more
Log in


Package Overview
File Explorer

Advanced tools


Angular progress icons for Brightlayer UI applications


Version published
Yearly downloads

Weekly downloads



Brightlayer UI Progress Icons

Progress icons

This is a library of icons with dynamic fill capabilities that can be used to show progress (similar to a traditional progress spinner or bar). These can be used to show health, battery life, etc.

Currently, we have icons available for:

  • battery
  • heart
  • pie
  • ups


To install the Brightlayer UI progress icons from NPM as a dependency for your project, you can run one of the following commands in your project root:

yarn add @brightlayer-ui/ng-progress-icons // for Angular components

Using the progress icons in your application

The progress icon components can be imported and used like you would use any other component. You can manually set the desired color for the icon, otherwise it will inherit the text color of its parent container;

// app.module.ts import { NgProgressIconsModule } from '@brightlayer-ui/ng-progress-icons'; ... imports: [ NgProgressIconsModule ], <!-- app.component.html --> <battery-progress percent="80" size="36" color="green" [charging]="true" [outlined]="true"></battery-progress> <heart-progress percent="99" size="36" color="pink" [outlined]="true"></heart-progress> <pie-progress percent="30" size="36" color="#0000ff" ring="4" [outlined]="true"></pie-progress> <ups-progress percent="10" size="36" color="#0000ff" [outlined]="true"></ups-progress>


Shared Attributes

These props are available on all of the progress icons in this package.

backgroundColorBackground color for the unfilled areastringno
colorThe color used for the icon fillstringno'currentColor'
labelColorLabel text colorstringno
labelPositionWhere to display the text labeltop, bottom, center, right, leftnocenter
labelSizeSize of the label in pxnumbernosize/4
outlinedWhether to use the outlined stylebooleannofalse
percentThe amount to fill the icon (0-100)numberno100
showPercentLabelOption to show percentage overlaybooleannofalse
sizeThe size of the icon (in px)numberno24

Any other props supplied will be provided to the root element (svg).

Battery Attributes

The battery supports all of the shared attributes above and the following additional attribute:

chargingWhether to show the charging indicatorbooleannofalse

Pie Attributes

The pie supports all of the shared attributes above and the following additional attribute:

ringThe thickness of the outer ring (1 = thin ring, 10 = full circle )numberno10

Building & Packaging

These progress icons are currently created manually by modifying the svg files from the design folder with various clip paths and fill algorithms. They are then packaged up for distribution via npm.

The Angular icons are built using the library packages built into the Angular CLI (read more).

To create a new component:

cd icons/progress/angular ng generate component component-name --project=ng-progress-icons

And then to create the /dist version:

ng build ng-progress-icons or yarn build

Once you have built the library, you can publish to npm via:

cd dist/ng-progress-icons npm version patch npm publish




Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc