# ngx-loaders-css

> Loaders.css component for Angular X

Latest version **3.0.0** (published 2021-11-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-loaders-css
pnpm add ngx-loaders-css
yarn add ngx-loaders-css
bun add ngx-loaders-css
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2021-11-05 |
| First published | 2018-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 177.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | t7yang |
| Maintainers | t7yang |
| Keywords | angular, ngx, loaders.css, spinner, loader, css |

## Links

- npm: https://www.npmjs.com/package/ngx-loaders-css
- Repository: https://github.com/t7yang/ngx-loaders-css
- Issues: https://github.com/t7yang/ngx-loaders-css/issues
- npm.io page: https://npm.io/package/ngx-loaders-css

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2021-11-05
- 2.0.0 — 2020-09-24
- 1.0.4 — 2020-04-06
- 1.0.3 — 2019-12-17
- 1.0.2 — 2019-08-21
- 1.0.1 — 2018-10-22
- 1.0.0 — 2018-10-12

## README

# Angular Loaders.css

[Loaders.css](https://connoratherton.com/loaders) component for Angular X.

## Demo

![demo](./src/assets/demo.gif)

Click [here](https://ngx-loaders-css-demo.stackblitz.io) to see the live DEMO, or try it out on [stackblitz](https://stackblitz.com/edit/ngx-loaders-css-demo).

## Installation

```bash
npm install ngx-loaders-css loaders.css
or
yarn add ngx-loaders-css loaders.css
```

## Usage

```typescript
// ...
import { NgxLoadersCssModule } from 'ngx-loaders-css';

@NgModule({
  // ...
  imports: [BrowserModule, NgxLoadersCssModule],
})
export class AppModule {}
```

```typescript
// ...
import { Component } from '@angular/core';
import { LoadersCSS } from 'ngx-loaders-css';

@Component({
  selector: 'app-root',
  template: '<loaders-css [loader]="loader" [scale]="3" [bgColor]="bgColor" [color]="color"></loaders-css>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  loader: LoadersCSS = 'pacman';
  bgColor = 'black';
  color = 'rgba(100, 100, 100, 0.5)';
}
```

## Props

| props   | type        | optional | default     | desc                                                         |
| ------- | ----------- | -------- | ----------- | ------------------------------------------------------------ |
| bgColor | string      | true     | transparent | set container background color, all valid css color          |
| color   | string      | true     | #FFFFFF     | set spinner elements color, all valid css color              |
| loader  | `LoaderCSS` | true     | ball-pulse  | import  `LoadersCSS` type to get intellisense and type check |
| scale   | number      | true     | 1           | zoom loader size                                             |

## Known issues

- Prop color only affect to those loaders that design without border color, the default color is generate by Loader.css style.

---
_Source: https://npm.io/package/ngx-loaders-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._