ngx-progress-loader v0.0.5

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? :joy:

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

Feel free to sift through the code :mag_right:, take inspiration, use the component, report bugs :bug: and if you like, even leave a star :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

Browser Support

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

To use the component, you need to import the package. No further configuration is required.

import { NgxProgressLoaderComponent } from 'ngx-progress-loader';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    NgxProgressLoaderComponent //Import the component into your project
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

Customization

At the moment it's only possible to offer a slight customization of the component.

More configuration options will be available in future versions of the component.

Color

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

Color	Hex Code		Default
black	#1a1a1a
light-grey	#d1d1d1
dark-grey	#424242
white	#ededed
blue	#3498DB		:heavy_check_mark:
orange	#F39C12
green	#27AE60
purple	#7D3C98

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

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

:bangbang: 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

CSS Customization

:warning: 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.

Example

  //The change will apply to all components of that type unless there is a more specific rule
  ngx-progress-loader {
    --track-color: #3d3737;
    --progress-color: '#0b667b';
  }

  //The change will be applied to all components with the custom-color class
  .custom-color {
    --track-color: #3d3737;
    --progress-color: '#0b667b';
  }

Demo

Example

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