1 | import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 |
|
4 | class ProgressSpinner {
|
5 | constructor() {
|
6 | this.strokeWidth = "2";
|
7 | this.fill = "none";
|
8 | this.animationDuration = "2s";
|
9 | }
|
10 | }
|
11 | ProgressSpinner.decorators = [
|
12 | { type: Component, args: [{
|
13 | selector: 'p-progressSpinner',
|
14 | template: `
|
15 | <div class="p-progress-spinner" [ngStyle]="style" [ngClass]="styleClass" role="alert" aria-busy="true">
|
16 | <svg class="p-progress-spinner-svg" viewBox="25 25 50 50" [style.animation-duration]="animationDuration">
|
17 | <circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" [attr.fill]="fill" [attr.stroke-width]="strokeWidth" stroke-miterlimit="10"/>
|
18 | </svg>
|
19 | </div>
|
20 | `,
|
21 | changeDetection: ChangeDetectionStrategy.OnPush,
|
22 | encapsulation: ViewEncapsulation.None,
|
23 | styles: [".p-progress-spinner{display:inline-block;height:100px;margin:0 auto;position:relative;width:100px}.p-progress-spinner:before{content:\"\";display:block;padding-top:100%}.p-progress-spinner-svg{-ms-transform-origin:center center;-webkit-animation:p-progress-spinner-rotate 2s linear infinite;animation:p-progress-spinner-rotate 2s linear infinite;bottom:0;height:100%;left:0;margin:auto;position:absolute;right:0;top:0;transform-origin:center center;width:100%}.p-progress-spinner-circle{-webkit-animation:p-progress-spinner-dash 1.5s ease-in-out infinite,p-progress-spinner-color 6s ease-in-out infinite;animation:p-progress-spinner-dash 1.5s ease-in-out infinite,p-progress-spinner-color 6s ease-in-out infinite;stroke:#d62d20;stroke-dasharray:89,200;stroke-dashoffset:0;stroke-linecap:round}@-webkit-keyframes p-progress-spinner-rotate{to{transform:rotate(1turn)}}@keyframes p-progress-spinner-rotate{to{transform:rotate(1turn)}}@-webkit-keyframes p-progress-spinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes p-progress-spinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@-webkit-keyframes p-progress-spinner-color{0%,to{stroke:#d62d20}40%{stroke:#0057e7}66%{stroke:#008744}80%,90%{stroke:#ffa700}}@keyframes p-progress-spinner-color{0%,to{stroke:#d62d20}40%{stroke:#0057e7}66%{stroke:#008744}80%,90%{stroke:#ffa700}}"]
|
24 | },] }
|
25 | ];
|
26 | ProgressSpinner.propDecorators = {
|
27 | style: [{ type: Input }],
|
28 | styleClass: [{ type: Input }],
|
29 | strokeWidth: [{ type: Input }],
|
30 | fill: [{ type: Input }],
|
31 | animationDuration: [{ type: Input }]
|
32 | };
|
33 | class ProgressSpinnerModule {
|
34 | }
|
35 | ProgressSpinnerModule.decorators = [
|
36 | { type: NgModule, args: [{
|
37 | imports: [CommonModule],
|
38 | exports: [ProgressSpinner],
|
39 | declarations: [ProgressSpinner]
|
40 | },] }
|
41 | ];
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 | export { ProgressSpinner, ProgressSpinnerModule };
|
48 |
|