rinodrummer / ngx-progress-loader

Angular Ngx Progress

Angular Ngx-ProgressLoader

How was Ngx-Progress Loader born?

While developing my website, I was looking for a component to use to represent my confidence level with various technologies.

As you can imagine, I certainly found a ready-made component that was right for me, but what's the point of life without some difficulty? 😂

So I decided to provide my personal interpretation of the component which until then was just an idea in my head 💪 😄

Feel free to sift through the code 🔎, take inspiration, use the component, report bugs 🐛 and if you like, even leave a star ⭐

---

Warning

The component is still under active development, and at the moment a stable version is not yet available.

As a result, both the methods of use and the API may undergo significant changes.

---

Table of contents

• Angular Ngx-ProgressLoader
• Version
• Browser Support
• Features
• Installation
• Configuration
• Customization
  • Color
  • Css Customization
• Demo
  • Example

Version

NgxProgressLoader	Angular
v1.x	-
v0.x	>=17.0.0 <18.0.0

Browser Support

Chrome	Firefox	IE / Edge	Safari	Opera
Latest ✔	Latest ✔	IE11, Edge ✔	Latest ✔	Latest ✔

Features

• Circle Loader
• Multi Circle Loader
• Square Loader
• Content projection
• Infinite loop animation
• Customization

Installation

ngx-progress-loader is available via npm

Using npm:

$ npm install ngx-progress-loader --save

Configuration

Customization

Color

ngx-progress-loader is presented with default colors that can be used.

Color		Hex Code	Default
black		#1a1a1a
white		#d9d9d9
blue		#3498DB	true
orange		#F39C12
green		#27AE60
purple		#7D3C98

The desired color can be indicated via the color input. If omitted, the default coloring is used.

‼️ It isn't currently possible to use color input to indicate custom colors. However, you can customize the coloring by using custom CSS rules. For more information see the section Css Customization

  <ngx-progress-loader
    type="circle"
    color="purple">
  </ngx-progress-loader>

CSS Customization

⚠️ The library is still under active development! Many properties may have been implemented only partially and therefore not available for all components

You can customize the appearance of your components by editing the CSS custom properties.

CSS Custom Propriety	Description	Support
--track-color	Allows customization of the loader track color! Track customization can only be done through the use of custom CSS.	✔️
--progress-color	Allows you to change the color of the Loader. You can indicate coloring in any format allowed by CSS (hex, rgb/rgba,...) ‼️ The color input takes precedence over the CSS property	✔️

Demo

Example

  <ngx-progress-loader
    type="circle"
    [value]='progressValue'
    color="orange">
  </ngx-progress-loader>