Commit 1f067e35 authored by Léonard Treille's avatar Léonard Treille
Browse files

Update app loader animation

parent c3172d40
<router-outlet></router-outlet>
<div class="app-loader" *ngIf="displayLoader" @fade>
<div class="logo-wrapper">
<svg width="128" height="128">
<use xlink:href="#m-logo" />
</svg>
<div class="logo-container">
<svg width="128" height="128">
<use xlink:href="#m-logo" />
</svg>
</div>
</div>
</div>
......@@ -4,7 +4,7 @@ import { environment } from 'src/environments/environment';
import { MatomoInjector, MatomoTracker } from 'ngx-matomo';
import { takeUntil, filter, tap } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { trigger, transition, style, animate, keyframes } from '@angular/animations';
import { trigger, transition, style, animate, keyframes, query } from '@angular/animations';
@Component({
selector: 'app-root',
......@@ -13,15 +13,17 @@ import { trigger, transition, style, animate, keyframes } from '@angular/animati
animations: [
trigger('fade', [
transition(':enter', [
animate(500, keyframes([
style({ transform: 'scale3d(1, 1, 1)', opacity: 0, offset: 0 }),
style({ transform: 'scale3d(1.25, 0.75, 1)', opacity: 1, offset: 0.3 }),
style({ transform: 'scale3d(0.75, 1.25, 1)', offset: 0.4 }),
style({ transform: 'scale3d(1.15, 0.85, 1)', offset: 0.5 }),
style({ transform: 'scale3d(.95, 1.05, 1)', offset: 0.65 }),
style({ transform: 'scale3d(1.05, .95, 1)', offset: 0.75 }),
style({ transform: 'scale3d(1, 1, 1)', offset: 1 }),
]))
query('.logo-container', [
animate(500, keyframes([
style({ transform: 'scale3d(1, 1, 1)', opacity: 0, offset: 0 }),
style({ transform: 'scale3d(1.25, 0.75, 1)', opacity: 1, offset: 0.3 }),
style({ transform: 'scale3d(0.75, 1.25, 1)', offset: 0.4 }),
style({ transform: 'scale3d(1.15, 0.85, 1)', offset: 0.5 }),
style({ transform: 'scale3d(.95, 1.05, 1)', offset: 0.65 }),
style({ transform: 'scale3d(1.05, .95, 1)', offset: 0.75 }),
style({ transform: 'scale3d(1, 1, 1)', offset: 1 }),
]))
])
]),
transition(':leave', [
style({ opacity: 1 }),
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment