feat(loader): add loading progress indicator (#1319)

* feat(progress): add loading progress indicator

* feat(progress): add pace.js package

* use theme variables for pace.js indicator

* cleanup

* remove loading circle
This commit is contained in:
Hatem Hosny 2017-10-18 11:45:23 +02:00 committed by Dmitry Nehaychik
parent 7ee43dcedd
commit f479715feb
5 changed files with 55 additions and 919 deletions

View file

@ -0,0 +1,22 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@mixin ngx-pace-theme() {
.pace .pace-progress {
background: nb-theme(color-fg-highlight);
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px nb-theme(color-fg-highlight), 0 0 5px nb-theme(color-fg-highlight);
}
.pace .pace-activity {
display: none;
// border-top-color: nb-theme(color-fg-highlight);
// border-left-color: nb-theme(color-fg-highlight);
}
}

View file

@ -5,10 +5,16 @@
@import '~@nebular/theme/styles/globals';
@import '~@nebular/auth/styles/all';
// loading progress bar theme
@import './pace.theme';
// install the framework and custom global styles
@include nb-install() {
// framework global styles
@include nb-theme-global();
@include nb-auth-global();
// loading progress bar
@include ngx-pace-theme();
};