Member Junction
    Preparing search index...

    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
    <!-- 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>
    Index

    Constructors

    constructor

    Properties

    Animation AnimationDuration gradientId LogoColor LogoGradient ShowText Size Text TextColor ɵcmp ɵfac

    Accessors

    animation animationDuration gradientCoords logoClass logoColor logoFill logoGradient logoStyle showText size text textColor textStyle

    Constructors

    Properties

    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: number

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

    gradientId: string

    Unique ID for the gradient definition to avoid conflicts

    LogoColor: string

    CSS color for the logo (solid color). Accepts any valid CSS color value. When empty, uses --mj-logo-color CSS variable (adapts to light/dark theme). Ignored if logoGradient is provided.

    LogoGradient: LogoGradient | null

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

    ShowText: boolean

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

    Size: "small" | "medium" | "large" | "auto"

    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: string

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

    "ɵcmp": unknown
    "ɵfac": ɵɵFactoryDeclaration<LoadingComponent, never>

    Accessors

    • get animation(): "pulse" | "spin" | "bounce" | "pulse-spin"

      Returns "pulse" | "spin" | "bounce" | "pulse-spin"

      Use Animation.

    • set animation(value: "pulse" | "spin" | "bounce" | "pulse-spin"): void

      Parameters

      • value: "pulse" | "spin" | "bounce" | "pulse-spin"

      Returns void

      Use Animation.

    • get animationDuration(): number

      Returns number

      Use AnimationDuration.

    • set animationDuration(value: number): void

      Parameters

      • value: number

      Returns void

      Use AnimationDuration.

    • 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 }

    • get logoClass(): string

      Returns string

    • get logoColor(): string

      Returns string

      Use LogoColor.

    • set logoColor(value: string): void

      Parameters

      • value: string

      Returns void

      Use LogoColor.

    • get logoFill(): string | null

      Get the fill value for the SVG paths. Returns a gradient URL reference if gradient is set, the explicit logoColor if provided, or null to let the CSS variable (--mj-logo-color) take effect.

      Returns string | null

    • get logoStyle(): string

      Returns string

    • get showText(): boolean

      Returns boolean

      Use ShowText.

    • set showText(value: boolean): void

      Parameters

      • value: boolean

      Returns void

      Use ShowText.

    • get size(): "small" | "medium" | "large" | "auto"

      Returns "small" | "medium" | "large" | "auto"

      Use Size.

    • set size(value: "small" | "medium" | "large" | "auto"): void

      Parameters

      • value: "small" | "medium" | "large" | "auto"

      Returns void

      Use Size.

    text

    • get text(): string

      Returns string

      Use Text.

    • set text(value: string): void

      Parameters

      • value: string

      Returns void

      Use Text.

    • get textColor(): string

      Returns string

      Use TextColor.

    • set textColor(value: string): void

      Parameters

      • value: string

      Returns void

      Use TextColor.

    • get textStyle(): string

      Returns string

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors