From 36a1961dd69c308552ad0f048e20a0c4aaf91e0c Mon Sep 17 00:00:00 2001 From: Raghu-Ch Date: Sun, 16 Sep 2018 14:10:50 -0400 Subject: [PATCH] add spinner --- src/app/app.module.ts | 1 + .../load-spinner/load-spinner.component.css | 244 ++++++++++++++++++ .../load-spinner/load-spinner.component.html | 22 ++ .../load-spinner/load-spinner.component.ts | 8 + src/app/product/product-detail.component.css | 3 + src/app/product/product-detail.component.html | 7 +- src/app/product/product-detail.component.ts | 3 +- src/app/product/product.component.html | 2 +- src/app/product/product.component.ts | 4 +- src/app/product/product.module.ts | 4 +- 10 files changed, 293 insertions(+), 5 deletions(-) create mode 100644 src/app/load-spinner/load-spinner.component.css create mode 100644 src/app/load-spinner/load-spinner.component.html create mode 100644 src/app/load-spinner/load-spinner.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 23d871d..321541f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -19,6 +19,7 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component import { HomeComponent } from './home/home.component'; import { ProductComponent } from './product/product.component'; import { ProductDetailComponent } from './product/product-detail.component'; +// import { LoadSpinnerComponent } from './load-spinner/load-spinner.component'; const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, diff --git a/src/app/load-spinner/load-spinner.component.css b/src/app/load-spinner/load-spinner.component.css new file mode 100644 index 0000000..e8b8000 --- /dev/null +++ b/src/app/load-spinner/load-spinner.component.css @@ -0,0 +1,244 @@ +/* .spinner { + margin: 100px auto; + width: 50px; + height: 40px; + text-align: center; + font-size: 10px; +} + +.spinner>div { + background-color: #333; + height: 100%; + width: 6px; + display: inline-block; + + -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; + animation: sk-stretchdelay 1.2s infinite ease-in-out; +} + +.spinner .rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} + +.spinner .rect3 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +.spinner .rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +.spinner .rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} + +@-webkit-keyframes sk-stretchdelay { + + 0%, + 40%, + 100% { + -webkit-transform: scaleY(0.4) + } + + 20% { + -webkit-transform: scaleY(1.0) + } +} + +@keyframes sk-stretchdelay { + + 0%, + 40%, + 100% { + transform: scaleY(0.4); + -webkit-transform: scaleY(0.4); + } + + 20% { + transform: scaleY(1.0); + -webkit-transform: scaleY(1.0); + } +} + */ + +.sk-circle { + margin: 100px auto; + width: 40px; + height: 40px; + position: relative; +} + +.sk-circle .sk-child { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} + +.sk-circle .sk-child:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; + animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; +} + +.sk-circle .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); +} + +.sk-circle .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); +} + +.sk-circle .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +.sk-circle .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); +} + +.sk-circle .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); +} + +.sk-circle .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.sk-circle .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); +} + +.sk-circle .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); +} + +.sk-circle .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} + +.sk-circle .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); +} + +.sk-circle .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); +} + +.sk-circle .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} + +.sk-circle .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; +} + +.sk-circle .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +.sk-circle .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} + +.sk-circle .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; +} + +.sk-circle .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; +} + +.sk-circle .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; +} + +.sk-circle .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; +} + +.sk-circle .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; +} + +.sk-circle .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; +} + +.sk-circle .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; +} + +@-webkit-keyframes sk-circleBounceDelay { + + 0%, + 80%, + 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes sk-circleBounceDelay { + + 0%, + 80%, + 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +} diff --git a/src/app/load-spinner/load-spinner.component.html b/src/app/load-spinner/load-spinner.component.html new file mode 100644 index 0000000..883a66d --- /dev/null +++ b/src/app/load-spinner/load-spinner.component.html @@ -0,0 +1,22 @@ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/load-spinner/load-spinner.component.ts b/src/app/load-spinner/load-spinner.component.ts new file mode 100644 index 0000000..070d7d5 --- /dev/null +++ b/src/app/load-spinner/load-spinner.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-load-spinner', + templateUrl: './load-spinner.component.html', + styleUrls: ['./load-spinner.component.css'] +}) +export class LoadSpinnerComponent { } diff --git a/src/app/product/product-detail.component.css b/src/app/product/product-detail.component.css index d0f30f7..ac85530 100644 --- a/src/app/product/product-detail.component.css +++ b/src/app/product/product-detail.component.css @@ -2,3 +2,6 @@ section { width: 60%; margin: 10px auto 0 auto; } +.content { + width: 50%; +} \ No newline at end of file diff --git a/src/app/product/product-detail.component.html b/src/app/product/product-detail.component.html index ddff924..3ff09fb 100644 --- a/src/app/product/product-detail.component.html +++ b/src/app/product/product-detail.component.html @@ -1,3 +1,8 @@
-

{{currentProduct.productName}}

+
+

{{currentProduct.productName}}

+

Brand: {{currentProduct.brand}}

+

$ {{currentProduct.price}}

+

{{currentProduct.category}}

+
diff --git a/src/app/product/product-detail.component.ts b/src/app/product/product-detail.component.ts index 6ad398b..1e30926 100644 --- a/src/app/product/product-detail.component.ts +++ b/src/app/product/product-detail.component.ts @@ -20,7 +20,8 @@ export class ProductDetailComponent implements OnInit { getProductDetails(): void { const id = this.route.snapshot.paramMap.get('id'); - // console.log(id); + // const id$ = this.route.params.subscribe(params => console.log(params['id'])); + // console.log(id$); this.productService.getProduct(id).subscribe((res) => { this.currentProduct = res; console.log(this.currentProduct); diff --git a/src/app/product/product.component.html b/src/app/product/product.component.html index 4c8a47c..ca5dcb4 100644 --- a/src/app/product/product.component.html +++ b/src/app/product/product.component.html @@ -1,5 +1,5 @@ +
{{product.productName}}
- diff --git a/src/app/product/product.component.ts b/src/app/product/product.component.ts index 6f56973..90c5c07 100644 --- a/src/app/product/product.component.ts +++ b/src/app/product/product.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; + import { ProductService } from '../product/product.service'; import { Product } from './product'; @@ -10,6 +11,7 @@ import { Product } from './product'; }) export class ProductComponent implements OnInit { products: Product[]; + showSpinner = true; constructor(private productService: ProductService, private router: Router) { } @@ -19,9 +21,9 @@ export class ProductComponent implements OnInit { getAllProducts(): void { this.productService.getProducts().subscribe((res) => { + this.showSpinner = false; this.products = res; console.log(this.products); }); } - } diff --git a/src/app/product/product.module.ts b/src/app/product/product.module.ts index ac28fe3..4189ddd 100644 --- a/src/app/product/product.module.ts +++ b/src/app/product/product.module.ts @@ -10,6 +10,7 @@ import { MatGridListModule } from '@angular/material/grid-list'; import { ProductComponent } from '../product/product.component'; import { ProductDetailComponent } from './product-detail.component'; +import { LoadSpinnerComponent } from '../load-spinner/load-spinner.component'; @NgModule({ imports: [ @@ -23,7 +24,8 @@ import { ProductDetailComponent } from './product-detail.component'; ], declarations: [ ProductComponent, - ProductDetailComponent + ProductDetailComponent, + LoadSpinnerComponent ] }) export class ProductModule { }