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.

Color	Hex values
blue	'#5c8df6' '#145af2' '#447cf5' '#dbe3f4'
gold	'#FFD700' '#d2b100' '#a68c00' '#796600'
white	'#ffffff' '#f0f0f0' '#d8d8d8' '#b0b0b0'
black	'#000000' '#333333' '#666666' '#999999'
red	'#ff0000' '#cc0000' '#990000' '#660000'
orange	'#ff9900' '#ff6600' '#ff3300' '#cc3300'
green	'#00cc00' '#009900' '#006600' '#003300'
yellow	'#ffff00' '#cccc00' '#999900' '#666600'
purple	'#9933ff' '#6600cc' '#4d0099' '#330066'
gray	'#D3D3D3' '#DCDCDC' '#E5E5E5' '#F0F0F0'
brown	'#FFB366' '#FFC299' '#FFD1B3' '#FFE0CC'
cyan	'#00FFFF' '#00CED1' '#20B2AA' '#008B8B'
violet	'#8A2BE2' '#9400D3' '#800080' '#4B0082'
pink	'#FFC0CB' '#FF69B4' '#FF1493' '#DB7093'

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.

Type	Description	First example	Second example
Color	Color which will be written in RGB or hex format	#5c8df6	rgb(92, 141, 246)
ColorSet	Array of Color, which will contain only 4 elements	['#5c8df6', '#145af2', '#447cf5', '#dbe3f4']	['#FFD700', '#d2b100', '#a68c00', '#796600']
PredefinedColorSet	Predefined color names	'blue'	'gold'
CubeSize	Size of the cube which can be provided as a number or string	32	'32px'
CubeDuration	Animation duration which can be provided as a number or string	800	800ms

ngx-cube-loader component

ngx-cube-loader is standalone component.

Property	Description	type	Default
[isFullSize]	Provide full-size (100%) value for the animation wrapper element	boolean	false
[colorSet]	Each cube color	ColorSet or PredefinedColorSet or 'random'	'blue'
[size]	Size of cubes	CubeSize	32
[duration]	Duration of animation	CubeDuration	800

ngx-cube-loader service

ngx-cube-loader service have 2 method

Method	Params	Description	Return
generateColorPalette	Base color (Color type), Palette Size	Method will generate array as many as provided palette size, colors will be based on base color	ColorSet
getRandomHexColor	None	Method will generate random hex and return it	Color

Based on the cube animations made by Aaron Iker

License

ngx-cube-loader is MIT licensed