https://github.com/pjlamb12/angular-loaders

Angular loader components
https://github.com/pjlamb12/angular-loaders

Last synced: 18 days ago
JSON representation

Angular loader components

• Host: GitHub
• URL: https://github.com/pjlamb12/angular-loaders
• Owner: pjlamb12
• Created: 2017-11-14T05:19:27.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2024-03-29T03:31:04.000Z (10 months ago)
• Last Synced: 2024-05-01T12:35:36.607Z (9 months ago)
• Language: TypeScript
• Size: 1.94 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-angular - angular-loaders - Angular loader components. (Table of contents / Third Party Components)
• fucking-awesome-angular - angular-loaders - Angular loader components. (Table of contents / Third Party Components)
• fucking-awesome-angular - angular-loaders - Angular loader components. (Table of contents / Third Party Components)

README

        
# ng-loaders Package

Install the package with the following command:

```sh

npm install ng-loaders

```

## Setting the `spinnerType`

You can change the spinner that displays by setting the `spinnerType` input on the component. The color is changed by updating the `--spinnerColor` CSS variable.

## Set the Default `spinnerType`

The library uses an InjectionToken to set the default `spinnerType`. This makes it so you don't have to provide the `spinnerType` input on every ngx-loader component. You can set the default `spinnerType` in your root module or root app component like so:

```

providers: [

	{

		provide: NG_LOADERS_CONFIG,

		useFactory: () => ({ spinnerType: 'rotating-dots' }),

	}

],

```

## Styling the Loader

You can style the loader with a couple of CSS variables. The loader's color can be set with the `--spinnerColor` CSS variable. You can set the loader's overlay background color with the `--spinnerOverlayColor` CSS variable. You can set the loader's overlay opacity with the `--spinnerOverlayOpacity` CSS variable.