add rotating cube

CHANGELOG.md

@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added `DvdLoaderComponent`
 - Added `CampLoaderComponent`
 - Added `HourglassLoaderComponent`
+- Added `FireLoaderComponent`
+- Added `RotatingCubeLoaderComponent`
 
 ## 0.0.8 - 2023-07-20
 ### Added

projects/doc/src/app/components-examples/components-examples.module.ts

@@ -13,6 +13,7 @@ import { DvdLoaderExampleComponent } from './loaders/dvd-loader-example/dvd-load
 import { CampLoaderExampleComponent } from './loaders/camp-loader-example/camp-loader-example.component';
 import { HourglassLoaderExampleComponent } from './loaders/hourglass-loader-example/hourglass-loader-example.component';
 import { FireLoaderExampleComponent } from './loaders/fire-loader-example/fire-loader-example.component';
+import { RotatingCubeLoaderExampleComponent } from './loaders/rotating-cube-loader-example/rotating-cube-loader-example.component';
 
 
 @NgModule({
@@ -25,6 +26,7 @@ import { FireLoaderExampleComponent } from './loaders/fire-loader-example/fire-l
     CampLoaderExampleComponent,
     HourglassLoaderExampleComponent,
     FireLoaderExampleComponent,
+    RotatingCubeLoaderExampleComponent,
   ],
   exports: [
     AmongUsButtonExampleComponent,
@@ -34,7 +36,8 @@ import { FireLoaderExampleComponent } from './loaders/fire-loader-example/fire-l
     DvdLoaderExampleComponent,
     CampLoaderExampleComponent,
     HourglassLoaderExampleComponent,
-    FireLoaderExampleComponent
+    FireLoaderExampleComponent,
+    RotatingCubeLoaderExampleComponent
   ],
   imports: [
     CommonModule,

projects/doc/src/app/components-examples/loaders/rotating-cube-loader-example/rotating-cube-loader-example.component.html

@@ -0,0 +1 @@
+<wtf-rotating-cube-loader/>

projects/doc/src/app/components-examples/loaders/rotating-cube-loader-example/rotating-cube-loader-example.component.scss

@@ -0,0 +1,4 @@
+:host{
+  height: 500px;
+  display: block;
+}

projects/doc/src/app/components-examples/loaders/rotating-cube-loader-example/rotating-cube-loader-example.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RotatingCubeLoaderExampleComponent } from './rotating-cube-loader-example.component';
+
+describe('RotatingCubeLoaderExampleComponent', () => {
+  let component: RotatingCubeLoaderExampleComponent;
+  let fixture: ComponentFixture<RotatingCubeLoaderExampleComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RotatingCubeLoaderExampleComponent]
+    });
+    fixture = TestBed.createComponent(RotatingCubeLoaderExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/doc/src/app/components-examples/loaders/rotating-cube-loader-example/rotating-cube-loader-example.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wtd-rotating-cube-loader-example',
+  templateUrl: './rotating-cube-loader-example.component.html',
+  styleUrls: ['./rotating-cube-loader-example.component.scss']
+})
+export class RotatingCubeLoaderExampleComponent {
+
+}

projects/doc/src/app/pages/loaders-page/loaders-page.component.html

@@ -36,4 +36,11 @@
       <wtd-fire-loader-example/>
     </wtd-code-snippet>
   </div>
+  <div>
+    Rotating cube
+
+    <wtd-code-snippet source="loaders/rotating-cube-loader-example" [files]="['html']">
+      <wtd-rotating-cube-loader-example/>
+    </wtd-code-snippet>
+  </div>
 </div>

projects/wtfui/src/lib/loaders/loaders.module.ts

@@ -5,6 +5,7 @@ import { DvdLoaderComponent } from './dvd-loader/dvd-loader.component';
 import { CampLoaderComponent } from './camp-loader/camp-loader.component';
 import { HourglassLoaderComponent } from './hourglass-loader/hourglass-loader.component';
 import { FireLoaderComponent } from './fire-loader/fire-loader.component';
+import { RotatingCubeLoaderComponent } from './rotating-cube-loader/rotating-cube-loader.component';
 
 
 
@@ -14,7 +15,8 @@ import { FireLoaderComponent } from './fire-loader/fire-loader.component';
     DvdLoaderComponent,
     CampLoaderComponent,
     HourglassLoaderComponent,
-    FireLoaderComponent
+    FireLoaderComponent,
+    RotatingCubeLoaderComponent
   ],
   imports: [
     CommonModule
@@ -25,6 +27,7 @@ import { FireLoaderComponent } from './fire-loader/fire-loader.component';
     CampLoaderComponent,
     HourglassLoaderComponent,
     FireLoaderComponent,
+    RotatingCubeLoaderComponent,
   ]
 })
 export class LoadersModule { }

projects/wtfui/src/lib/loaders/rotating-cube-loader/rotating-cube-loader.component.html

@@ -0,0 +1,22 @@
+<div class="cube div">
+  <div class="top div"></div>
+  <div class="div">
+      <span class="span" style="--i: 0">
+        <p>loading..</p>
+        <p>loading..</p>
+      </span>
+    <span class="span" style="--i: 1">
+        <p>loading..</p>
+        <p>loading..</p>
+      </span>
+    <span class="span" style="--i: 2">
+        <p>loading..</p>
+        <p>loading..</p>
+      </span>
+    <span class="span" style="--i: 3">
+        <p>loading..</p>
+        <p>loading..</p>
+      </span>
+  </div>
+</div>
+

projects/wtfui/src/lib/loaders/rotating-cube-loader/rotating-cube-loader.component.scss

@@ -0,0 +1,135 @@
+:host {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  .cube {
+    position: relative;
+    height: 100px;
+    width: 100px;
+    transform-style: preserve-3d;
+    animation: animate 4s linear infinite;
+  }
+
+  @keyframes animate {
+    0% {
+      transform: rotateX(-30deg) rotateY(0deg);
+    }
+
+    100% {
+      transform: rotateX(-30deg) rotateY(360deg);
+    }
+  }
+
+  .cube .div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform-style: preserve-3d;
+  }
+
+  .cube .div .span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: rotateY(calc(90deg * var(--i))) translateZ(50px);
+    background-image: linear-gradient(
+        -45deg,
+        #000000,
+        #13273f,
+        #0d1729,
+        #6a6a8d);
+    background-size: 1200% 1200%;
+    animation: AnimationName 30s ease infinite;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform-style: preserve-3d;
+  }
+
+  .cube .div .span p {
+    position: absolute;
+    font-size: 1em;
+    color: white;
+    transform: translateZ(20px);
+  }
+
+  .cube .div .span p:nth-child(1) {
+    transform: translateZ(0) translateY(20px);
+    color: rgba(0,0,0,0.1);
+    filter: blur(2px);
+  }
+
+  @keyframes AnimationName {
+    0% {
+      background-position: 0% 50%;
+    }
+
+    50% {
+      background-position: 100% 50%;
+    }
+
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  .top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 300px;
+    height: 300px;
+    background-image: linear-gradient(
+        -45deg,
+        #000000,
+        #13273f,
+        #0d1729,
+        #6a6a8d);
+    transform: rotateX(90deg) translateZ(50px);
+    background-size: 1200% 1200%;
+    animation: AnimationName 30s ease infinite;
+  }
+
+  .top::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100px;
+    height: 100px;
+    background-image: linear-gradient(
+        -45deg,
+        #000000,
+        #0d0d0e,
+        #030303,
+        #000000);
+    background-size: 1200% 1200%;
+    animation: AnimationName 30s ease infinite;
+    box-shadow: 0 0 120px #3d413e,0 0 120px #302f2f,0 0 120px #413f3f;
+    transition: box-shadow 3s;
+    transform: translateZ(-200px);
+    filter: blur(40px);
+  }
+
+  @keyframes AnimationName2 {
+    0% {
+      background-position: 0% 50%;
+    }
+
+    50% {
+      background-position: 100% 50%;
+    }
+
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+
+}

projects/wtfui/src/lib/loaders/rotating-cube-loader/rotating-cube-loader.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RotatingCubeLoaderComponent } from './rotating-cube-loader.component';
+
+describe('RotatingCubeLoaderComponent', () => {
+  let component: RotatingCubeLoaderComponent;
+  let fixture: ComponentFixture<RotatingCubeLoaderComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [RotatingCubeLoaderComponent]
+    });
+    fixture = TestBed.createComponent(RotatingCubeLoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/wtfui/src/lib/loaders/rotating-cube-loader/rotating-cube-loader.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wtf-rotating-cube-loader',
+  templateUrl: './rotating-cube-loader.component.html',
+  styleUrls: ['./rotating-cube-loader.component.scss']
+})
+export class RotatingCubeLoaderComponent {
+
+  // Design by Radwa Khalil
+  // src: https://uiverse.io/radwakhalil22/spotty-pug-7
+}

projects/wtfui/src/public-api.ts

@@ -17,3 +17,4 @@ export * from './lib/loaders/dvd-loader/dvd-loader.component';
 export * from './lib/loaders/camp-loader/camp-loader.component';
 export * from './lib/loaders/hourglass-loader/hourglass-loader.component';
 export * from './lib/loaders/fire-loader/fire-loader.component';
+export * from './lib/loaders/rotating-cube-loader/rotating-cube-loader.component';