loading screen

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { PlaygroundModule } from './components/playground/playground.module';
 import { SandboxModule } from './components/sandbox/sandbox.module';
 import { SignInModule } from './components/sign-in/sign-in.module';
 import { LoadingScreenComponent } from './components/loading-screen/loading-screen.component';
+import { UiModule } from 'projects/ui/src/lib/ui.module'
 
 @NgModule({
   declarations: [AppComponent, LoadingScreenComponent],
@@ -27,6 +28,7 @@ import { LoadingScreenComponent } from './components/loading-screen/loading-scre
     PlaygroundModule,
     SandboxModule,
     SignInModule,
+    UiModule
   ],
   providers: [
     { provide: APP_BASE_HREF, useValue: '/' },

src/app/components/loading-screen/loading-screen.component.html

@@ -1,2 +1,6 @@
-<p>loading-screen works!</p>
-<p>{{status}}</p>
+<div class="icon">
+  <!-- <img src="assets/games/garrysmod/icon.png" width="100%"> -->
+</div>
+<div class="status">
+  <skirda-heading size="4">{{status ?? 'Status message'}}</skirda-heading>
+</div>

src/app/components/loading-screen/loading-screen.component.scss

@@ -0,0 +1,79 @@
+:host {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  gap: 2.75rem;
+
+  @keyframes pulse {
+    from {
+      scale: 0.98;
+    }
+    to {
+      scale: 1.02;
+    }
+  }
+
+  @keyframes loaderPulse {
+    from {
+      opacity: 1;
+      scale: 0;
+      background-color: #d6282800;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    to {
+      opacity: 0;
+      scale: 3;
+      background-color: #d6282899;
+    }
+  }
+
+  .icon {
+    animation: pulse 1s ease 0s infinite alternate;
+    width: 140px;
+    height: 140px;
+    overflow: hidden;
+    background-color: rgba(255, 255, 255, 0.1);
+    mask-image: url('/assets/icon_mask.svg');
+    mask-size: cover;
+    user-select: none;
+    pointer-events: none;
+    transform-origin: bottom center;
+  }
+
+
+  .status {
+    position: relative;
+
+    &:before, &:after {
+      content: '';
+      position: absolute;
+      display: block;
+      left: 50%;
+      top: 2px;
+      translate: -50% -50%;
+      width: 24px;
+      height: 24px;
+      border: 1.5px solid var(--sk-primary);
+      border-radius: 50%;
+      animation: loaderPulse 1.4s linear -0.7s infinite forwards;
+      mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 75%);
+      z-index: 0;
+      box-shadow: inset 0px 0.25px 0px 0px rgba(255, 255, 255, 0.5);
+    }
+
+    &:after {
+      animation-delay: 0s;
+      border: 1.5px solid var(--sk-secondary);
+    }
+
+    skirda-heading {
+      position: relative;
+      z-index: 3;
+    }
+  }
+}

src/app/components/loading-screen/loading-screen.component.ts

@@ -5,11 +5,11 @@ import { Component, OnInit, Input } from '@angular/core';
   styleUrls: ['./loading-screen.component.scss']
 })
 export class LoadingScreenComponent implements OnInit {
-  @Input() status!:string
+  @Input() status?: string
 
   constructor() { }
 
-  SetStatus(newStatus:string){
+  SetStatus(newStatus: string){
     this.status = newStatus
   }
 

src/assets/icon_mask.svg

@@ -0,0 +1,3 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.70215 12.9365C0 18.1384 0 24.9722 0 38.6399V51.3601C0 65.0278 0 71.8616 2.70215 77.0635C4.979 81.4468 8.55322 85.021 12.9365 87.2979C18.1382 90 24.9722 90 38.6401 90H51.3599C65.0278 90 71.8618 90 77.0635 87.2979C81.4468 85.021 85.021 81.4468 87.2979 77.0635C90 71.8616 90 65.0278 90 51.3601V38.6399C90 24.9722 90 18.1384 87.2979 12.9365C85.021 8.55322 81.4468 4.979 77.0635 2.70215C71.8618 0 65.0278 0 51.3599 0H38.6401C24.9722 0 18.1382 0 12.9365 2.70215C8.55322 4.979 4.979 8.55322 2.70215 12.9365Z" fill="black"/>
+</svg>

src/styles.scss

@@ -7,6 +7,7 @@ html, body {
   margin: 0;
   font-family: var(--font);
   line-height: 90%;
+  user-select: none;
 }
 
 button, input, textarea {