Class LoadingModal

LoadingModal displays a loading spinner and a customizable "Loading..." text as an overlay.

Selector

app-loading-modal

Standalone

true

Imports

CommonModule

Inputs

  • isVisible (boolean): Controls the visibility of the modal overlay. Default is false.
  • backgroundColor (string): Background color of the modal overlay. Default is 'rgba(0, 0, 0, 0.5)'.
  • displayColor (string): Color of the loading text. Default is 'white'.

Properties

  • modalContainerStyle (object): Computed styles for the modal container.
  • modalContentStyle (object): Computed styles for the modal content.
  • spinnerContainerStyle (object): Computed styles for the spinner container.
  • loadingTextStyle (object): Computed styles for the loading text.

Example

<app-loading-modal
  [isVisible]="true"
  [backgroundColor]="'rgba(0, 0, 0, 0.5)'"
  [displayColor]="'white'">
</app-loading-modal>

Styles

  • .spinner: Styles for the loading spinner.
  • @keyframes spin: Keyframes for the spinner rotation animation.
  • .modal-content: Styles for the modal content container.
  • .loading-text: Styles for the loading text.

Accessors

modalContainerStyle modalContentStyle spinnerContainerStyle loadingTextStyle

Constructors

constructor

Properties

isVisible backgroundColor? displayColor?

Accessors

modalContainerStyle

  • get modalContainerStyle(): {
        position: string;
        top: string;
        left: string;
        width: string;
        height: string;
        backgroundColor: undefined | string;
        display: string;
        alignItems: string;
        justifyContent: string;
        zIndex: string;
    }

  • Returns {
        position: string;
        top: string;
        left: string;
        width: string;
        height: string;
        backgroundColor: undefined | string;
        display: string;
        alignItems: string;
        justifyContent: string;
        zIndex: string;
    }

    • position: string
    • top: string
    • left: string
    • width: string
    • height: string
    • backgroundColor: undefined | string
    • display: string
    • alignItems: string
    • justifyContent: string
    • zIndex: string

modalContentStyle

  • get modalContentStyle(): {
        backgroundColor: undefined | string;
        borderRadius: string;
        padding: string;
        maxWidth: string;
        textAlign: string;
    }

  • Returns {
        backgroundColor: undefined | string;
        borderRadius: string;
        padding: string;
        maxWidth: string;
        textAlign: string;
    }

    • backgroundColor: undefined | string
    • borderRadius: string
    • padding: string
    • maxWidth: string
    • textAlign: string

spinnerContainerStyle

loadingTextStyle

Constructors

constructor

Properties

isVisible

isVisible: boolean = false

OptionalbackgroundColor

backgroundColor?: string = 'rgba(0, 0, 0, 0.5)'

OptionaldisplayColor

displayColor?: string = 'white'

Settings

Member Visibility

On This Page

Accessors
Constructors
Properties