How was Ngx-Progress Loader born?
npm install ngx-progress-loader
Chrome |
Firefox |
IE / Edge |
Safari |
Opera |
ngx-progress-loader is available via npm
bash
$ npm install ngx-progress-loader --save
`
Configuration
To use the component, you need to import the package. No further configuration is required.
`typescript
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.
$3
ngx-progress-loader is presented with default colors that can be used.
| Color | Hex Code | | Default |
|:------------:|:--------:|:--------------------------------------------------------------------:|:------------------:|
| black | #1a1a1a | !black! | |
| light-grey | #d1d1d1 | !light-grey! | |
| dark-grey | #424242 | !dark-grey! | |
| white | #ededed | !white! | |
| blue | #3498DB | !blue! | :heavy_check_mark: |
| orange | #F39C12 | !orange! | |
| green | #27AE60 | !green! | |
| purple | #7D3C98 | !purple! | |
The desired color can be indicated via the color input. If omitted, the default coloring is used.
`angular17html
type="circle"
color="purple">
`
: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
$3
: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.
| 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. | :heavy_check_mark: |
| --progress-color | Allows you to change the color of the Loader. You can indicate coloring in any format allowed by CSS (hex, rgb/rgba,...)
:bangbang: The color input takes precedence over the CSS property | :heavy_check_mark: |
| --progress-stroke | Determines the width of the track.
Available only for circle type progress | :heavy_minus_sign: |
#### Example
`scss
//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
$3
`angular17html
type="circle"
[value]='progressValue'
color="orange">
``