ngx-cube-loader v1.0.5

NgxCubeLoader

Angular (v17+) cube loader which can be configured.

Examples

The base animation looks like this:

But if you don't like the blue color, you could use one of the predefined colors:

Installation

npm install ngx-cube-loader

Usage

Import NgxCubeLoaderComponent in your module or component where you want to use it.

For module:

import { NgModule } from "@angular/core";
import { NgxCubeLoaderComponent } from "ngx-cube-loader";

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

Or for a component if it's standalone:

import { Component } from "@angular/core";
import { NgxCubeLoaderComponent } from "ngx-cube-loader";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [NgxCubeLoaderComponent],
  template: "<ngx-cube-loader></ngx-cube-loader>",
})
export class AppComponent {}

Example with component inputs:

import { Component } from "@angular/core";
import { NgxCubeLoaderComponent } from "ngx-cube-loader";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [NgxCubeLoaderComponent],
  template: `
    <ngx-cube-loader colorSet="gold"></ngx-cube-loader>
    <ngx-cube-loader colorSet="random"></ngx-cube-loader>
    <ngx-cube-loader [colorSet]="['#00cc00', '#009900', '#006600', '#003300']"></ngx-cube-loader>
    <ngx-cube-loader [size]="20"></ngx-cube-loader>
    <ngx-cube-loader [duration]="500"></ngx-cube-loader>
  `,
  style,
})
export class AppComponent {}

Predefined colors

The component does have 14 predefined colors. Only the blue color is hand-written, and others are generated based on the first color by using the NgxCubeLoaderService method generateColorPalette. You can use these predefined colors or modify and provide inputs.

There is also a predefined color 'random', which is completely random. You could use it, but personally, I wouldn't rely on it. The random color palette is generated by the NgxCubeLoaderService. First, it generates a random hex value with the getRandomHexColor method, and the returned value is then used for the generateColorPalette method as the base color, resulting in a random color palette.

API

NgxCubeLoader provides one component, one service, five types and one const.

Types

In the code, there are a few types used.

ngx-cube-loader component

ngx-cube-loader is standalone component.

ngx-cube-loader service

ngx-cube-loader service have 2 method

Based on the cube animations made by Aaron Iker

License

ngx-cube-loader is MIT licensed