Class LoadingComponent

MJ Loading Component - Displays an animated MJ logo with optional text.

Features:

  • SVG logo with customizable animations (pulse, spin, bounce)
  • Sizes to fit container (use CSS on host element)
  • Optional loading text
  • Customizable text and logo colors
  • Gradient support for logo fill

Example

<!-- Basic usage (fills container) -->
<mj-loading></mj-loading>

<!-- With custom text -->
<mj-loading text="Loading data..."></mj-loading>

<!-- No text -->
<mj-loading [showText]="false"></mj-loading>

<!-- With custom colors -->
<mj-loading text="Loading..." textColor="#4CAF50" logoColor="#4CAF50"></mj-loading>

<!-- With gradient colors (holiday theme) -->
<mj-loading [logoGradient]="{startColor: '#228B22', endColor: '#C41E3A'}"></mj-loading>

<!-- With spinning animation -->
<mj-loading animation="spin"></mj-loading>

<!-- Fixed size container -->
<div style="width: 200px; height: 150px;">
  <mj-loading text="Please wait..."></mj-loading>
</div>

Constructors

constructor

Properties

animation animationDuration gradientId logoColor logoGradient showText size text textColor ɵcmp ɵfac

Accessors

gradientCoords logoClass logoFill logoStyle textStyle

Constructors

constructor

Properties

animation

animation: "pulse" | "spin" | "bounce" | "pulse-spin"

Animation type for the logo.

  • 'pulse': Fade in/out with subtle scale (default)
  • 'spin': Rotate continuously
  • 'bounce': Bounce up and down
  • 'pulse-spin': Pulse while slowly spinning

animationDuration

animationDuration: number

Animation duration in seconds. Default is 1.5 seconds for the pulse animation.

Readonly gradientId

gradientId: string

Unique ID for the gradient definition to avoid conflicts

logoColor

logoColor: string

CSS color for the logo (solid color). Accepts any valid CSS color value. Default is MJ blue (#264FAF). Ignored if logoGradient is provided.

logoGradient

logoGradient: null | LogoGradient

Gradient configuration for the logo. When provided, creates a linear gradient fill instead of solid color. Takes precedence over logoColor.

showText

showText: boolean

Whether to show the text below the logo. When false, only the animated logo is shown.

size

size: "small" | "auto" | "medium" | "large"

Size preset for quick sizing.

  • 'small': 40x22px logo
  • 'medium': 80x45px logo (default)
  • 'large': 120x67px logo
  • 'auto': fills container

text

text: string

Text to display below the loading animation. Set to empty string or use showText=false to hide text.

textColor

textColor: string

CSS color for the loading text. Accepts any valid CSS color value.

Static ɵcmp

ɵcmp: unknown

Static ɵfac

ɵfac: unknown

Accessors

gradientCoords

  • get gradientCoords(): {
        x1: string;
        x2: string;
        y1: string;
        y2: string;
    }

  • Calculate gradient transform based on angle. Converts angle to x1, y1, x2, y2 coordinates for SVG linearGradient.

    Returns {
        x1: string;
        x2: string;
        y1: string;
        y2: string;
    }

    • x1: string
    • x2: string
    • y1: string
    • y2: string

logoClass

  • get logoClass(): string

  • Returns string

logoFill

  • get logoFill(): string

  • Get the fill value for the SVG paths. Returns a gradient URL reference if gradient is set, otherwise the solid color.

    Returns string

logoStyle

  • get logoStyle(): string

  • Returns string

textStyle

  • get textStyle(): string

  • Returns string

Settings

Member Visibility

Theme

On This Page

constructoranimationanimationDurationgradientIdlogoColorlogoGradientshowTextsizetexttextColorɵcmpɵfacgradientCoordslogoClasslogoFilllogoStyletextStyle