Mercurial > hg > ugly-duckling
annotate src/app/progress-spinner/progress-spinner.component.ts @ 184:7643e60dc1dd
Half height.
author | Lucas Thompson <dev@lucas.im> |
---|---|
date | Wed, 22 Mar 2017 11:22:48 +0000 |
parents | c02c76b94148 |
children | 7224d9f990cf |
rev | line source |
---|---|
dev@115 | 1 /** |
dev@115 | 2 * Created by lucast on 14/03/2017. |
dev@115 | 3 */ |
dev@115 | 4 |
dev@115 | 5 |
dev@115 | 6 import {Component, Input} from "@angular/core"; |
dev@115 | 7 @Component({ |
dev@115 | 8 selector: 'ugly-progress-spinner', |
dev@115 | 9 template: ` |
dev@115 | 10 <div class="container" [hidden]="!isVisible"> |
dev@115 | 11 <md-spinner |
dev@115 | 12 class="spinner" |
dev@115 | 13 color="primary" |
dev@115 | 14 ></md-spinner> |
dev@115 | 15 </div> |
dev@115 | 16 `, |
dev@115 | 17 styles: [` |
dev@115 | 18 .container { |
dev@115 | 19 height: 40px; |
dev@115 | 20 width: 40px; |
dev@115 | 21 position: absolute; |
dev@115 | 22 top: calc(100% - 40px); |
dev@115 | 23 left: calc(100% - 40px); |
dev@115 | 24 } |
dev@115 | 25 |
dev@115 | 26 .spinner { |
dev@115 | 27 width: 100%; |
dev@115 | 28 height: 100%; |
dev@115 | 29 } |
dev@115 | 30 `] |
dev@115 | 31 }) |
dev@115 | 32 export class ProgressSpinnerComponent { |
dev@115 | 33 @Input() isVisible: boolean = true; |
dev@115 | 34 } |