@corentinmag/ngx-splash NPM

To use this library:

$ npm install @corentinmag/ngx-splash lottie-web ngx-lottie

check demo here

// app.module.ts

import { NgxSplashModule } from '@corentinmag/ngx-float-button';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...

@NgModule({
    ...,
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        NgxSplashModule
    ]
})

<!-- app.component.html -->
<ngx-splash 
    title="My Awesome App" 
    message="Loading application..."
    [stages]="stages"
    animation="assets/lottie-animation.json"
    icon="assets/logo.jpg"
    loader="assets/loader.svg"
    (finalize)="onFinalize($event)"
>
</ngx-splash>

List of Inputs

@Inputs	type	default	description
title	`string`	`My App`	title
message	`string`	`Loading...`	custom message to help user
loader	`string`	null	path to the loader (svg)
icon	`string`	null	path to the main icon (enterprise logo, ...)
animation	`string`	null	either a lottie json file or a lottie url
stages	`Stage[]`	null	An array of object containing the following keys `messageBefore`, `messageAfter`, `observable`
keyframe	`Keyframe[]`	null	animation that is played while the slash screen is active
keyframeOptions	`object`	`15`	option for the keyframe object

Stage

stages = [
        {
          messageBefore: 'Initializing profile...',
          messageAfter: 'Profile initialized!',
          observable: timer(2000)
        },
        {
          messageBefore: 'Getting data...',
          messageAfter: 'Got data!',
          observable: timer(5000)
        },
      ]

angular angular2 splash screen splash

tslib

@infinitebrahmanuniverse/nolb-_cor @everything-registry/sub-chunk-199

1.0.0

2 years ago