@ngx-loading-bar/core - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

@ngx-loading-bar/core.es5.js

@@ -119,3 +119,3 @@ import { Component, Injectable, Input, NgModule } from '@angular/core';
                 selector: 'ngx-loading-bar',
-                template: "\n    <ng-container *ngIf=\"(loader.progress$|async) as progress\">\n      <div id=\"loading-bar-spinner\" *ngIf=\"includeSpinner\" [style.color]=\"color\"><div class=\"spinner-icon\"></div></div>\n      <div id=\"loading-bar\" *ngIf=\"includeBar\" [style.color]=\"color\">\n        <div class=\"bar\" [style.background]=\"color\" [style.width]=\"progress + '%'\">\n          <div class=\"peg\"></div>\n        </div>\n      </div>\n    </ng-container>\n  ",
+                template: "\n    <ng-container *ngIf=\"(loader.progress$|async) as progress\">\n      <div id=\"loading-bar-spinner\" *ngIf=\"includeSpinner\" [style.color]=\"color\">\n        <div [style.width]=\"diameter\" [style.height]=\"diameter\" class=\"spinner-icon\"></div>\n      </div>\n      <div id=\"loading-bar\" *ngIf=\"includeBar\" [style.color]=\"color\">\n        <div class=\"bar\" [style.background]=\"color\" [style.height]=\"height\" [style.width]=\"progress + '%'\">\n          <div class=\"peg\" [style.height]=\"height\"></div>\n        </div>\n      </div>\n    </ng-container>\n  ",
                 preserveWhitespaces: false,
@@ -135,2 +135,4 @@ styles: ["\n    /* Make clicks pass-through */\n    :host > div {\n      pointer-events: none;\n      -webkit-pointer-events: none;\n      -webkit-transition: 350ms linear all;\n      transition: 350ms linear all;\n      color: #29d;\n      /* Fancy blur effect */ }\n      :host > div .bar {\n        -webkit-transition: width 350ms;\n        transition: width 350ms;\n        background: #29d;\n        position: fixed;\n        z-index: 10002;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 2px;\n        border-bottom-right-radius: 1px;\n        border-top-right-radius: 1px; }\n      :host > div .peg {\n        position: absolute;\n        width: 70px;\n        right: 0;\n        top: 0;\n        height: 2px;\n        opacity: .45;\n        -ms-box-shadow: 1px 0 6px 1px;\n        -webkit-box-shadow: 1px 0 6px 1px;\n        box-shadow: 1px 0 6px 1px;\n        color: inherit;\n        border-radius: 100%; }\n      :host > div:first-child {\n        display: block;\n        position: fixed;\n        z-index: 10002;\n        top: 10px;\n        left: 10px; }\n        :host > div:first-child .spinner-icon {\n          width: 14px;\n          height: 14px;\n          border: solid 2px transparent;\n          border-top-color: inherit;\n          border-left-color: inherit;\n          border-radius: 50%;\n          -webkit-animation: loading-bar-spinner 400ms linear infinite;\n          animation: loading-bar-spinner 400ms linear infinite; }\n\n    @-webkit-keyframes loading-bar-spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg); }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg); } }\n\n    @keyframes loading-bar-spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n                transform: rotate(0deg); }\n      100% {\n        -webkit-transform: rotate(360deg);\n                transform: rotate(360deg); } }\n  "],
     'color': [{ type: Input },],
+    'height': [{ type: Input },],
+    'diameter': [{ type: Input },],
 };
@@ -137,0 +139,0 @@ var LoadingBarModule = /** @class */ (function () {

@ngx-loading-bar/core.js

@@ -119,6 +119,8 @@ import { Component, Injectable, Input, NgModule } from '@angular/core';
     <ng-container *ngIf="(loader.progress$|async) as progress">
-      <div id="loading-bar-spinner" *ngIf="includeSpinner" [style.color]="color"><div class="spinner-icon"></div></div>
+      <div id="loading-bar-spinner" *ngIf="includeSpinner" [style.color]="color">
+        <div [style.width]="diameter" [style.height]="diameter" class="spinner-icon"></div>
+      </div>
       <div id="loading-bar" *ngIf="includeBar" [style.color]="color">
-        <div class="bar" [style.background]="color" [style.width]="progress + '%'">
-          <div class="peg"></div>
+        <div class="bar" [style.background]="color" [style.height]="height" [style.width]="progress + '%'">
+          <div class="peg" [style.height]="height"></div>
         </div>
@@ -206,2 +208,4 @@ </div>
     'color': [{ type: Input },],
+    'height': [{ type: Input },],
+    'diameter': [{ type: Input },],
 };
@@ -208,0 +212,0 @@

bundles/core.umd.js

@@ -121,3 +121,3 @@ (function (global, factory) {
                 selector: 'ngx-loading-bar',
-                template: "\n    <ng-container *ngIf=\"(loader.progress$|async) as progress\">\n      <div id=\"loading-bar-spinner\" *ngIf=\"includeSpinner\" [style.color]=\"color\"><div class=\"spinner-icon\"></div></div>\n      <div id=\"loading-bar\" *ngIf=\"includeBar\" [style.color]=\"color\">\n        <div class=\"bar\" [style.background]=\"color\" [style.width]=\"progress + '%'\">\n          <div class=\"peg\"></div>\n        </div>\n      </div>\n    </ng-container>\n  ",
+                template: "\n    <ng-container *ngIf=\"(loader.progress$|async) as progress\">\n      <div id=\"loading-bar-spinner\" *ngIf=\"includeSpinner\" [style.color]=\"color\">\n        <div [style.width]=\"diameter\" [style.height]=\"diameter\" class=\"spinner-icon\"></div>\n      </div>\n      <div id=\"loading-bar\" *ngIf=\"includeBar\" [style.color]=\"color\">\n        <div class=\"bar\" [style.background]=\"color\" [style.height]=\"height\" [style.width]=\"progress + '%'\">\n          <div class=\"peg\" [style.height]=\"height\"></div>\n        </div>\n      </div>\n    </ng-container>\n  ",
                 preserveWhitespaces: false,
@@ -137,2 +137,4 @@ styles: ["\n    /* Make clicks pass-through */\n    :host > div {\n      pointer-events: none;\n      -webkit-pointer-events: none;\n      -webkit-transition: 350ms linear all;\n      transition: 350ms linear all;\n      color: #29d;\n      /* Fancy blur effect */ }\n      :host > div .bar {\n        -webkit-transition: width 350ms;\n        transition: width 350ms;\n        background: #29d;\n        position: fixed;\n        z-index: 10002;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 2px;\n        border-bottom-right-radius: 1px;\n        border-top-right-radius: 1px; }\n      :host > div .peg {\n        position: absolute;\n        width: 70px;\n        right: 0;\n        top: 0;\n        height: 2px;\n        opacity: .45;\n        -ms-box-shadow: 1px 0 6px 1px;\n        -webkit-box-shadow: 1px 0 6px 1px;\n        box-shadow: 1px 0 6px 1px;\n        color: inherit;\n        border-radius: 100%; }\n      :host > div:first-child {\n        display: block;\n        position: fixed;\n        z-index: 10002;\n        top: 10px;\n        left: 10px; }\n        :host > div:first-child .spinner-icon {\n          width: 14px;\n          height: 14px;\n          border: solid 2px transparent;\n          border-top-color: inherit;\n          border-left-color: inherit;\n          border-radius: 50%;\n          -webkit-animation: loading-bar-spinner 400ms linear infinite;\n          animation: loading-bar-spinner 400ms linear infinite; }\n\n    @-webkit-keyframes loading-bar-spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg); }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg); } }\n\n    @keyframes loading-bar-spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n                transform: rotate(0deg); }\n      100% {\n        -webkit-transform: rotate(360deg);\n                transform: rotate(360deg); } }\n  "],
     'color': [{ type: core.Input },],
+    'height': [{ type: core.Input },],
+    'diameter': [{ type: core.Input },],
 };
@@ -139,0 +141,0 @@ var LoadingBarModule = /** @class */ (function () {

core.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"LoadingBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"LoadingBarComponent"}],"exports":[{"__symbolic":"reference","name":"LoadingBarComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"LoadingBarModule"},"providers":[{"__symbolic":"reference","name":"LoadingBarService"}]}}}},"LoadingBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-loading-bar","template":"\n    <ng-container *ngIf=\"(loader.progress$|async) as progress\">\n      <div id=\"loading-bar-spinner\" *ngIf=\"includeSpinner\" [style.color]=\"color\"><div class=\"spinner-icon\"></div></div>\n      <div id=\"loading-bar\" *ngIf=\"includeBar\" [style.color]=\"color\">\n        <div class=\"bar\" [style.background]=\"color\" [style.width]=\"progress + '%'\">\n          <div class=\"peg\"></div>\n        </div>\n      </div>\n    </ng-container>\n  ","preserveWhitespaces":false,"styles":["\n    /* Make clicks pass-through */\n    :host > div {\n      pointer-events: none;\n      -webkit-pointer-events: none;\n      -webkit-transition: 350ms linear all;\n      transition: 350ms linear all;\n      color: #29d;\n      /* Fancy blur effect */ }\n      :host > div .bar {\n        -webkit-transition: width 350ms;\n        transition: width 350ms;\n        background: #29d;\n        position: fixed;\n        z-index: 10002;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 2px;\n        border-bottom-right-radius: 1px;\n        border-top-right-radius: 1px; }\n      :host > div .peg {\n        position: absolute;\n        width: 70px;\n        right: 0;\n        top: 0;\n        height: 2px;\n        opacity: .45;\n        -ms-box-shadow: 1px 0 6px 1px;\n        -webkit-box-shadow: 1px 0 6px 1px;\n        box-shadow: 1px 0 6px 1px;\n        color: inherit;\n        border-radius: 100%; }\n      :host > div:first-child {\n        display: block;\n        position: fixed;\n        z-index: 10002;\n        top: 10px;\n        left: 10px; }\n        :host > div:first-child .spinner-icon {\n          width: 14px;\n          height: 14px;\n          border: solid 2px transparent;\n          border-top-color: inherit;\n          border-left-color: inherit;\n          border-radius: 50%;\n          -webkit-animation: loading-bar-spinner 400ms linear infinite;\n          animation: loading-bar-spinner 400ms linear infinite; }\n\n    @-webkit-keyframes loading-bar-spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg); }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg); } }\n\n    @keyframes loading-bar-spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n                transform: rotate(0deg); }\n      100% {\n        -webkit-transform: rotate(360deg);\n                transform: rotate(360deg); } }\n  "]}]}],"members":{"includeSpinner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"includeBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"LoadingBarService"}]}]}},"LoadingBarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"start":[{"__symbolic":"method"}],"complete":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"increment":[{"__symbolic":"method"}]}}},"origins":{"LoadingBarModule":"./core.module","LoadingBarComponent":"./loading-bar.component","LoadingBarService":"./loading-bar.service"},"importAs":"@ngx-loading-bar/core"}
+{"__symbolic":"module","version":3,"metadata":{"LoadingBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"LoadingBarComponent"}],"exports":[{"__symbolic":"reference","name":"LoadingBarComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"LoadingBarModule"},"providers":[{"__symbolic":"reference","name":"LoadingBarService"}]}}}},"LoadingBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-loading-bar","template":"\n    <ng-container *ngIf=\"(loader.progress$|async) as progress\">\n      <div id=\"loading-bar-spinner\" *ngIf=\"includeSpinner\" [style.color]=\"color\">\n        <div [style.width]=\"diameter\" [style.height]=\"diameter\" class=\"spinner-icon\"></div>\n      </div>\n      <div id=\"loading-bar\" *ngIf=\"includeBar\" [style.color]=\"color\">\n        <div class=\"bar\" [style.background]=\"color\" [style.height]=\"height\" [style.width]=\"progress + '%'\">\n          <div class=\"peg\" [style.height]=\"height\"></div>\n        </div>\n      </div>\n    </ng-container>\n  ","preserveWhitespaces":false,"styles":["\n    /* Make clicks pass-through */\n    :host > div {\n      pointer-events: none;\n      -webkit-pointer-events: none;\n      -webkit-transition: 350ms linear all;\n      transition: 350ms linear all;\n      color: #29d;\n      /* Fancy blur effect */ }\n      :host > div .bar {\n        -webkit-transition: width 350ms;\n        transition: width 350ms;\n        background: #29d;\n        position: fixed;\n        z-index: 10002;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 2px;\n        border-bottom-right-radius: 1px;\n        border-top-right-radius: 1px; }\n      :host > div .peg {\n        position: absolute;\n        width: 70px;\n        right: 0;\n        top: 0;\n        height: 2px;\n        opacity: .45;\n        -ms-box-shadow: 1px 0 6px 1px;\n        -webkit-box-shadow: 1px 0 6px 1px;\n        box-shadow: 1px 0 6px 1px;\n        color: inherit;\n        border-radius: 100%; }\n      :host > div:first-child {\n        display: block;\n        position: fixed;\n        z-index: 10002;\n        top: 10px;\n        left: 10px; }\n        :host > div:first-child .spinner-icon {\n          width: 14px;\n          height: 14px;\n          border: solid 2px transparent;\n          border-top-color: inherit;\n          border-left-color: inherit;\n          border-radius: 50%;\n          -webkit-animation: loading-bar-spinner 400ms linear infinite;\n          animation: loading-bar-spinner 400ms linear infinite; }\n\n    @-webkit-keyframes loading-bar-spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg); }\n      100% {\n        -webkit-transform: rotate(360deg);\n        transform: rotate(360deg); } }\n\n    @keyframes loading-bar-spinner {\n      0% {\n        -webkit-transform: rotate(0deg);\n                transform: rotate(0deg); }\n      100% {\n        -webkit-transform: rotate(360deg);\n                transform: rotate(360deg); } }\n  "]}]}],"members":{"includeSpinner":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"includeBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"diameter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"LoadingBarService"}]}]}},"LoadingBarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"start":[{"__symbolic":"method"}],"complete":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"set":[{"__symbolic":"method"}],"increment":[{"__symbolic":"method"}]}}},"origins":{"LoadingBarModule":"./core.module","LoadingBarComponent":"./loading-bar.component","LoadingBarService":"./loading-bar.service"},"importAs":"@ngx-loading-bar/core"}

loading-bar.component.d.ts

@@ -7,3 +7,5 @@ import { LoadingBarService } from './loading-bar.service';
     color: any;
+    height: any;
+    diameter: any;
     constructor(loader: LoadingBarService);
 }

package.json

 {
   "name": "@ngx-loading-bar/core",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Automatic page loading / progress bar for Angular",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

67903

increased by3.6%

Lines of code

622

increased by1.63%

No dependency changes