UNPKG

primeng

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng) [![npm downloads](https://img.shields.io/npm/dm/primeng.sv

53 lines (49 loc) 3.18 kB
import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; class ProgressBar { constructor() { this.showValue = true; this.unit = '%'; this.mode = 'determinate'; } } ProgressBar.decorators = [ { type: Component, args: [{ selector: 'p-progressBar', template: ` <div [class]="styleClass" [ngStyle]="style" role="progressbar" aria-valuemin="0" [attr.aria-valuenow]="value" aria-valuemax="100" [ngClass]="{'p-progressbar p-component': true, 'p-progressbar-determinate': (mode === 'determinate'), 'p-progressbar-indeterminate': (mode === 'indeterminate')}"> <div *ngIf="mode === 'determinate'" class="p-progressbar-value p-progressbar-value-animate" [style.width]="value + '%'" style="display:block"></div> <div *ngIf="mode === 'determinate' && showValue" class="p-progressbar-label" [style.display]="value != null ? 'block' : 'none'">{{value}}{{unit}}</div> <div *ngIf="mode === 'indeterminate'" class="p-progressbar-indeterminate-container"> <div class="p-progressbar-value p-progressbar-value-animate"></div> </div> </div> `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-progressbar{overflow:hidden;position:relative}.p-progressbar-determinate .p-progressbar-value{border:0;display:none;height:100%;position:absolute;width:0}.p-progressbar-determinate .p-progressbar-value-animate{transition:width 1s ease-in-out}.p-progressbar-determinate .p-progressbar-label{font-weight:700;height:100%;position:absolute;text-align:center;width:100%}.p-progressbar-indeterminate .p-progressbar-value:before{animation:p-progressbar-indeterminate-anim 2.1s cubic-bezier(.65,.815,.735,.395) infinite;background-color:inherit;bottom:0;content:\"\";left:0;position:absolute;top:0;will-change:left,right}.p-progressbar-indeterminate .p-progressbar-value:after{animation:p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;animation-delay:1.15s;background-color:inherit;bottom:0;content:\"\";left:0;position:absolute;top:0;will-change:left,right}@keyframes p-progressbar-indeterminate-anim{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes p-progressbar-indeterminate-anim-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}"] },] } ]; ProgressBar.propDecorators = { value: [{ type: Input }], showValue: [{ type: Input }], style: [{ type: Input }], styleClass: [{ type: Input }], unit: [{ type: Input }], mode: [{ type: Input }] }; class ProgressBarModule { } ProgressBarModule.decorators = [ { type: NgModule, args: [{ imports: [CommonModule], exports: [ProgressBar], declarations: [ProgressBar] },] } ]; /** * Generated bundle index. Do not edit. */ export { ProgressBar, ProgressBarModule }; //# sourceMappingURL=primeng-progressbar.js.map