diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ce9ca93..de44eb7 100644
--- a/src/app/app.module.ts
+++ b/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: '/' },
diff --git a/src/app/components/loading-screen/loading-screen.component.html b/src/app/components/loading-screen/loading-screen.component.html
index c0da824..64c0bfe 100644
--- a/src/app/components/loading-screen/loading-screen.component.html
+++ b/src/app/components/loading-screen/loading-screen.component.html
@@ -1,2 +1,6 @@
-
loading-screen works!
-{{status}}
+
+
+
+
+ {{status ?? 'Status message'}}
+
diff --git a/src/app/components/loading-screen/loading-screen.component.scss b/src/app/components/loading-screen/loading-screen.component.scss
index e69de29..0194221 100644
--- a/src/app/components/loading-screen/loading-screen.component.scss
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/loading-screen/loading-screen.component.ts b/src/app/components/loading-screen/loading-screen.component.ts
index 270dc19..036e06b 100644
--- a/src/app/components/loading-screen/loading-screen.component.ts
+++ b/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
}
diff --git a/src/assets/icon_mask.svg b/src/assets/icon_mask.svg
new file mode 100644
index 0000000..59ab6ac
--- /dev/null
+++ b/src/assets/icon_mask.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/styles.scss b/src/styles.scss
index 9392e23..ca210b2 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,6 +7,7 @@ html, body {
margin: 0;
font-family: var(--font);
line-height: 90%;
+ user-select: none;
}
button, input, textarea {