src/app/app.component.ts
| selector | app-root |
| templateUrl | app.component.html |
Properties |
Methods |
constructor(platform: Platform, splashScreen: SplashScreen, statusBar: StatusBar, fcm: FcmService)
|
|||||||||||||||
|
Defined in src/app/app.component.ts:14
|
|||||||||||||||
|
Parameters :
|
| initializeApp |
initializeApp()
|
|
Defined in src/app/app.component.ts:26
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/app.component.ts:22
|
|
Returns :
void
|
| showSplash |
Default value : true
|
|
Defined in src/app/app.component.ts:14
|
import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FcmService } from './fcm.service';
import { timer } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
showSplash = true; // <-- show animation
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private fcm: FcmService
) {}
ngOnInit(): void {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
timer(10000).subscribe(() => (this.showSplash = false));
this.fcm.getPermission().then(() => this.fcm.showMessages());
});
}
}
<ion-app>
<style>
.main {
margin: 0;
width: 100%;
height: 100vh;
font-family: 'Exo', sans-serif;
color: #fff;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
width: 100%;
position: absolute;
top: 35%;
text-align: center;
}
h1 {
font-weight: 300;
}
h3 {
color: #eee;
font-weight: 100;
}
h5 {
color: #eee;
font-weight: 300;
}
a,
a:hover {
text-decoration: none;
color: #ddd;
}
</style>
<div class="main" *ngIf="showSplash">
<div class="container">
<h1>Pure CSS Animated Gradient Background</h1>
<h3>
<a href="https://codepen.io/P1N2O/full/pyBNzX" target="_blank"
>Full Screen
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="18"
height="18"
viewBox="0 0 172 172"
style=" fill:#000000;"
>
<g
fill="none"
fill-rule="nonzero"
stroke="none"
stroke-width="1"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-miterlimit="10"
stroke-dasharray=""
stroke-dashoffset="0"
font-family="none"
font-weight="none"
font-size="none"
text-anchor="none"
style="mix-blend-mode: normal"
>
<path d="M0,172v-172h172v172z" fill="none"></path>
<g fill="#eeeeee">
<path
d="M143.19336,21.43001c-0.26705,0.00844 -0.53341,0.03181 -0.79785,0.06999h-34.89551c-2.58456,-0.03655 -4.98858,1.32136 -6.29153,3.55376c-1.30295,2.2324 -1.30295,4.99342 0,7.22582c1.30295,2.2324 3.70697,3.59031 6.29153,3.55376h18.53256l-66.59961,66.59961c-1.8722,1.79752 -2.62637,4.46674 -1.97164,6.97823c0.65473,2.51149 2.61604,4.4728 5.12753,5.12753c2.51149,0.65473 5.18071,-0.09944 6.97823,-1.97165l66.59961,-66.59961v18.53255c-0.03655,2.58456 1.32136,4.98858 3.55376,6.29153c2.2324,1.30295 4.99342,1.30295 7.22582,0c2.2324,-1.30295 3.59031,-3.70697 3.55376,-6.29153v-34.9235c0.28889,-2.08845 -0.35639,-4.19816 -1.76411,-5.76769c-1.40772,-1.56953 -3.43507,-2.43964 -5.54253,-2.3788zM35.83333,21.5c-7.83362,0 -14.33333,6.49972 -14.33333,14.33333v100.33333c0,7.83362 6.49972,14.33333 14.33333,14.33333h100.33333c7.83362,0 14.33333,-6.49972 14.33333,-14.33333v-43c0.03655,-2.58456 -1.32136,-4.98858 -3.55376,-6.29153c-2.2324,-1.30295 -4.99342,-1.30295 -7.22582,0c-2.2324,1.30295 -3.59031,3.70697 -3.55376,6.29153v43h-100.33333v-100.33333h43c2.58456,0.03655 4.98858,-1.32136 6.29153,-3.55376c1.30295,-2.2324 1.30295,-4.99342 0,-7.22582c-1.30295,-2.2324 -3.70697,-3.59031 -6.29153,-3.55376z"
></path>
</g>
</g></svg
></a>
</h3>
<h5><small>by</small> <a href="https://manuelpinto.in" target="_blank"> Manuel Pinto</a></h5>
</div>
<!-- <h1>Pure CSS3 Animated Gradient Background</h1>
<h2>
by Manuel Pinto
</h2> -->
</div>
<ion-router-outlet></ion-router-outlet>
</ion-app>