add loading placeholder component

README.md

@@ -30,9 +30,14 @@ This library only contains three components and doesn't have third party depende
 
 - `uiowa-ring`
 
-  Rotating spinner with Golden and Black colors. Userd as loading indicator.
+  Rotating spinner with Golden and Black colors. Used as loading indicator.
   Allow to set spinner size. By default, size is 4rem.
 
+- `loading-placeholder`
+
+  Carousel style one stripe spinner in a white background with box shadow.
+  Allow to fit the parent container.
+
 ## Usage
 
 ```html
@@ -65,6 +70,10 @@ This library only contains three components and doesn't have third party depende
 
 <uiowa-ring></uiowa-ring> // default size = 4rem
 <uiowa-ring size="2"></uiowa-ring>
+
+<div style="height: 100px">
+  <loading-placeholder></loading-placeholder>
+</div>
 ```
 
 ```typescript

projects/uiowa/spinner/README.md

@@ -30,9 +30,14 @@ This library only contains three components and doesn't have third party depende
 
 - `uiowa-ring`
 
-  Rotating spinner with Golden and Black colors. Userd as loading indicator.
+  Rotating spinner with Golden and Black colors. Used as loading indicator.
   Allow to set spinner size. By default, size is 4rem.
 
+- `loading-placeholder`
+
+  Carousel style one stripe spinner in a white background with box shadow.
+  Allow to fit the parent container.
+
 ## Usage
 
 ```html
@@ -65,6 +70,10 @@ This library only contains three components and doesn't have third party depende
 
 <uiowa-ring></uiowa-ring> // default size = 4rem
 <uiowa-ring size="2"></uiowa-ring>
+
+<div style="height: 100px">
+  <loading-placeholder></loading-placeholder>
+</div>
 ```
 
 ```typescript

projects/uiowa/spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiowa/spinner",
-  "version": "13.0.0",
+  "version": "13.1.0",
   "author": "Changhui Xu <[email protected]>",
   "description": "(action-spinner) rotating circle spinner, used for actions such as button clicks. (loading-bar) beeping blocks, used for loading promises. (uiowa-ring) rotating golden and black spinner, used as loading indicator.",
   "license": "MIT",

projects/uiowa/spinner/src/lib/action-spinner/action-spinner.component.ts

@@ -1,9 +1,10 @@
-import { Component, Attribute } from '@angular/core';
+import { Component, Attribute, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'action-spinner',
   templateUrl: './action-spinner.component.html',
   styleUrls: ['./action-spinner.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ActionSpinnerComponent {
   constructor(@Attribute('size') public size: number) {

projects/uiowa/spinner/src/lib/loading-bar/loading-bar.component.ts

@@ -1,9 +1,10 @@
-import { Component, Attribute } from '@angular/core';
+import { Component, Attribute, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'loading-bar',
   templateUrl: './loading-bar.component.html',
   styleUrls: ['./loading-bar.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoadingBarComponent {
   constructor(@Attribute('size') public size: number) {

projects/uiowa/spinner/src/lib/loading-placeholder/loading-placeholder.component.css

@@ -0,0 +1,30 @@
+.placeholder-item {
+  box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15);
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+.placeholder-item::before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: -200px;
+  top: 0;
+  height: 100%;
+  width: 200px;
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    #e8e8e8 50%,
+    transparent 100%
+  );
+  animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+@keyframes load {
+  from {
+    left: -200px;
+  }
+  to {
+    left: 100%;
+  }
+}

projects/uiowa/spinner/src/lib/loading-placeholder/loading-placeholder.component.ts

@@ -0,0 +1,18 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+
+@Component({
+  selector: 'loading-placeholder',
+  template: `<div class="placeholder-item"></div>`,
+  styleUrls: ['./loading-placeholder.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LoadingPlaceholderComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

projects/uiowa/spinner/src/lib/spinner.module.ts

@@ -3,14 +3,21 @@ import { CommonModule } from '@angular/common';
 import { ActionSpinnerComponent } from './action-spinner/action-spinner.component';
 import { LoadingBarComponent } from './loading-bar/loading-bar.component';
 import { UiowaRingComponent } from './uiowa-ring/uiowa-ring.component';
+import { LoadingPlaceholderComponent } from './loading-placeholder/loading-placeholder.component';
 
 @NgModule({
   imports: [CommonModule],
   declarations: [
     ActionSpinnerComponent,
     LoadingBarComponent,
     UiowaRingComponent,
+    LoadingPlaceholderComponent,
+  ],
+  exports: [
+    ActionSpinnerComponent,
+    LoadingBarComponent,
+    UiowaRingComponent,
+    LoadingPlaceholderComponent,
   ],
-  exports: [ActionSpinnerComponent, LoadingBarComponent, UiowaRingComponent],
 })
 export class SpinnerModule {}

projects/uiowa/spinner/src/lib/uiowa-ring/uiowa-ring.component.ts

@@ -1,9 +1,10 @@
-import { Component, Attribute } from '@angular/core';
+import { Component, Attribute, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'uiowa-ring',
   templateUrl: './uiowa-ring.component.html',
   styleUrls: ['./uiowa-ring.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UiowaRingComponent {
   constructor(@Attribute('size') public size: number) {

projects/uiowa/spinner/src/public-api.ts

@@ -6,3 +6,4 @@ export * from './lib/spinner.module';
 export * from './lib/action-spinner/action-spinner.component';
 export * from './lib/loading-bar/loading-bar.component';
 export * from './lib/uiowa-ring/uiowa-ring.component';
+export * from './lib/loading-placeholder/loading-placeholder.component';

src/app/app.component.html

@@ -77,6 +77,13 @@ <h3>
     </div>
   </section>
 
+  <section>
+    <pre>{{ s8 }}</pre>
+    <div style="height: 100px">
+      <loading-placeholder></loading-placeholder>
+    </div>
+  </section>
+
   <section>
     <div class="git">
       <a href="https://github.com/changhuixu/spinner" title="git repo"

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   s1 = `
@@ -61,4 +61,9 @@ export class AppComponent {
 <uiowa-ring></uiowa-ring>   // default size = 4rem
 <uiowa-ring size="2"></uiowa-ring>
   `;
+  s8 = `
+<div style="height: 100px">
+  <loading-placeholder></loading-placeholder>
+</div>
+  `;
 }