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 β
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.
- Angular Ngx-ProgressLoader
- Version
- Browser Support
- Features
- Installation
- Configuration
- Customization
- Demo
NgxProgressLoader | Angular |
---|---|
v1.x | - |
v0.x | >=17.0.0 <18.0.0 |
![]() Chrome |
![]() Firefox |
![]() IE / Edge |
![]() Safari |
![]() Opera |
---|---|---|---|---|
Latest β | Latest β | IE11, Edge β | Latest β | Latest β |
- Circle Loader
- Multi Circle Loader
- Square Loader
- Content projection
- Infinite loop animation
- Customization
ngx-progress-loader
is available via npm
Using npm:
$ npm install ngx-progress-loader --save
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.
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>
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 ,...) |
βοΈ |
<ngx-progress-loader
type="circle"
[value]='progressValue'
color="orange">
</ngx-progress-loader>