ngh-spinner
Version:
Library for Loading Spinner - Angular 4/5/6
1 lines • 6.42 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NghSpinnerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"getState":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"NghSpinnerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"ngh-spinner","template":"<div class=\"overlay\" [ngStyle]=\"{'background-color':bgColor,'color': color}\" *ngIf=\"showHide\" >\n <div class=\"loader\" [ngClass]=\"type\">\n <div></div>\n </div>\n</div>","styles":[".overlay{position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:2}.loader{position:absolute;top:50%;left:50%}.circle-clip{border:5px solid transparent;border-radius:50%;border-top:5px solid;width:25px;height:25px;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}.square-spin{border:5px solid;width:25px;height:25px;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}.bar-load{height:4px;position:relative;overflow:hidden;background-color:#c3c3c3;width:25%;left:37.5%}.bar-load div{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:4px;background-color:currentColor;-webkit-animation:2s linear infinite loading;animation:2s linear infinite loading}@-webkit-keyframes loading{from{left:-200px;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}@keyframes loading{from{left:-200px;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}.bar-center{height:4px;position:relative;overflow:hidden;background-color:#c3c3c3;width:25%;left:37.5%}.bar-center div{content:\"\";display:inline;position:absolute;width:0;height:100%;left:50%;text-align:center;background-color:currentColor;-webkit-animation:3s linear infinite center-loading;animation:3s linear infinite center-loading}@-webkit-keyframes center-loading{from{left:50%;width:0;z-index:100}33.3333%{left:0;width:100%;z-index:10}to{left:0;width:100%}}@keyframes center-loading{from{left:50%;width:0;z-index:100}33.3333%{left:0;width:100%;z-index:10}to{left:0;width:100%}}.spinner{width:40px;height:40px;margin:40px;-webkit-animation:1.4s ease-in-out infinite rotate,1.4s ease-in-out infinite alternate background;animation:1.4s ease-in-out infinite rotate,1.4s ease-in-out infinite alternate background}@-webkit-keyframes rotate{0%{-webkit-transform:perspective(120px) rotateX(0) rotateY(0);transform:perspective(120px) rotateX(0) rotateY(0)}50%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(0);transform:perspective(120px) rotateX(-180deg) rotateY(0)}100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-180deg);transform:perspective(120px) rotateX(-180deg) rotateY(-180deg)}}@keyframes rotate{0%{-webkit-transform:perspective(120px) rotateX(0) rotateY(0);transform:perspective(120px) rotateX(0) rotateY(0)}50%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(0);transform:perspective(120px) rotateX(-180deg) rotateY(0)}100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-180deg);transform:perspective(120px) rotateX(-180deg) rotateY(-180deg)}}@-webkit-keyframes background{0%,100%,50%{background-color:currentColor}}@keyframes background{0%,100%,50%{background-color:currentColor}}.signal{border:5px solid currentColor;border-radius:30px;height:30px;left:50%;margin:-15px 0 0 -15px;opacity:0;position:absolute;top:50%;width:30px;-webkit-animation:1s ease-out infinite pulsate;animation:1s ease-out infinite pulsate}@-webkit-keyframes pulsate{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0}}@keyframes pulsate{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}"]}]}],"members":{"bgColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NghSpinnerService"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"NghSpinnerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/common/http","name":"HTTP_INTERCEPTORS","line":12,"character":15},"useClass":{"__symbolic":"reference","name":"ɵa"},"multi":true}],"declarations":[{"__symbolic":"reference","name":"NghSpinnerComponent"}],"exports":[{"__symbolic":"reference","name":"NghSpinnerComponent"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NghSpinnerService"}]}],"intercept":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}}},"origins":{"NghSpinnerService":"./lib/ngh-spinner.service","NghSpinnerComponent":"./lib/ngh-spinner.component","NghSpinnerModule":"./lib/ngh-spinner.module","ɵa":"./lib/ngh-interceptor.service"},"importAs":"ngh-spinner"}