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

    gradientCoords logoClass logoFill logoStyle 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": unknown

    Accessors

    • 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 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 textStyle(): string

      Returns string

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors