🚀 Usage

Use the following steps to use the Nx Angular SVG Loaders in your Angular project.

Import

Import selected Nx{SELECTED}LoaderComponent component into your standalone component or module and then use with <nx-angular-svg-{SELECT}-loader> tag.

app.component.ts

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule } from "@angular/router";

import { NxOvalLoaderComponent } from "@ngeenx/nx-angular-svg-loaders";

@Component({
  standalone: true,
  imports: [
    RouterModule,
    CommonModule,

    // ...

    NxOvalLoaderComponent
  ],
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.scss",
})
export class AppComponent {
  // ...

  public isLoading = true;

  // ...
}

app.component.html

...

<nx-angular-svg-oval-loader [isLoading]="isLoading" [size]="40" />

...

Coloring

You can set custom color to the loader by passing style.color prop to the loader component or any parent element. SVG loader will inherit the color from the parent element with currentColor value.

app.component.html

...

<nx-angular-svg-oval-loader [isLoading]="isLoading" [size]="40" [style]="{ color: 'orange' }" />

<!-- or -->

<nx-angular-svg-oval-loader [isLoading]="isLoading" [size]="40" class="text-orange-500"/>
...

Alignment

You can set horizontal alignment to the loader by passing isCentered prop to the loader component.

First you need to import the styles in your styles.scss file (also see source code of the styles.css).

styles.scss

...
@import "../node_modules/@ngeenx/nx-angular-svg-loaders/styles.css";

...

Then you can use the isCentered prop in your component.

app.component.html

<nx-angular-svg-oval-loader [isLoading]="isLoading" [size]="40" [isCentered]="true" />
...